Icons

@sgroup/tailwind-plugins/icons

Icons should always be SVGs (no icon fonts here!), and by default, they take up 100% of the width and height of the containing element. This allows you to control to size of the svg without having to directly modify the SVG file.

Icons

You can also modify the colour of the SVGs path, by setting the colour on the containing element. SVG's will be forced to use fill: currentColor;.

Colour
With buttons

You can also disable this behaviour using .no-fill. This is most useful for multi-coloured SVGs that you wouldn't want to inherit the colour from the parent.

Preserve colours