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.
<div class="icon w-20 h-20">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.8 227.5L448 177.8v-76c0-3.3-2.7-6-6-6h-20c-3.3 0-6 2.7-6 6v50.1L276.1 39.1c-11.7-9.5-28.5-9.5-40.2 0L2.2 227.5c-2.6 2.1-3 5.9-.9 8.4l12.6 15.6c2.1 2.6 5.9 3 8.5.9L64 218.9v229c0 17.7 14.3 32 32 32h116c6.6 0 12-5.4 12-12V335.8l64 .3v132.2c0 6.6 5.4 12 12 12l116-.3c17.7 0 32-14.3 32-32V219l41.6 33.5c2.6 2.1 6.4 1.7 8.5-.9l12.6-15.6c2.1-2.6 1.6-6.4-.9-8.5zM416 448l-96 .3V316c0-6.6-5.4-12-12-12l-104-.3c-6.6 0-12 5.4-12 12V448H96V193.1l156.2-126c2.2-1.8 5.3-1.8 7.5 0l156.2 126V448z"/></svg>
</div>
<div class="icon w-10 h-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.8 227.5L448 177.8v-76c0-3.3-2.7-6-6-6h-20c-3.3 0-6 2.7-6 6v50.1L276.1 39.1c-11.7-9.5-28.5-9.5-40.2 0L2.2 227.5c-2.6 2.1-3 5.9-.9 8.4l12.6 15.6c2.1 2.6 5.9 3 8.5.9L64 218.9v229c0 17.7 14.3 32 32 32h116c6.6 0 12-5.4 12-12V335.8l64 .3v132.2c0 6.6 5.4 12 12 12l116-.3c17.7 0 32-14.3 32-32V219l41.6 33.5c2.6 2.1 6.4 1.7 8.5-.9l12.6-15.6c2.1-2.6 1.6-6.4-.9-8.5zM416 448l-96 .3V316c0-6.6-5.4-12-12-12l-104-.3c-6.6 0-12 5.4-12 12V448H96V193.1l156.2-126c2.2-1.8 5.3-1.8 7.5 0l156.2 126V448z"/></svg>
</div>
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;
.
<div class="icon w-20 h-20 text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.8 227.5L448 177.8v-76c0-3.3-2.7-6-6-6h-20c-3.3 0-6 2.7-6 6v50.1L276.1 39.1c-11.7-9.5-28.5-9.5-40.2 0L2.2 227.5c-2.6 2.1-3 5.9-.9 8.4l12.6 15.6c2.1 2.6 5.9 3 8.5.9L64 218.9v229c0 17.7 14.3 32 32 32h116c6.6 0 12-5.4 12-12V335.8l64 .3v132.2c0 6.6 5.4 12 12 12l116-.3c17.7 0 32-14.3 32-32V219l41.6 33.5c2.6 2.1 6.4 1.7 8.5-.9l12.6-15.6c2.1-2.6 1.6-6.4-.9-8.5zM416 448l-96 .3V316c0-6.6-5.4-12-12-12l-104-.3c-6.6 0-12 5.4-12 12V448H96V193.1l156.2-126c2.2-1.8 5.3-1.8 7.5 0l156.2 126V448z"/></svg>
</div>
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.
<div class="icon w-20 h-20 text-red-500">
<svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient gradientUnits="userSpaceOnUse" id="linear-gradient" x1="256" x2="256" y1="99.15" y2="424.78"><stop offset="0" stop-color="#47a2f5"/><stop offset="1" stop-color="#2b6fdc"/></linearGradient></defs><title/><rect fill="url(#linear-gradient)" height="412.22" rx="55.43" width="412.22" x="49.89" y="49.89"/><path d="M217.92,266.2H171v53.15h47V462.11h62.43V320.43H327l9.69-54.23h-56V226.57A33.57,33.57,0,0,1,314.33,193H341V143.49H283.11a64.93,64.93,0,0,0-64.93,64.64Z" fill="#fefefe"/></svg>
</div>
<div class="icon no-fill w-20 h-20 text-red-500">
<svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient gradientUnits="userSpaceOnUse" id="linear-gradient" x1="256" x2="256" y1="99.15" y2="424.78"><stop offset="0" stop-color="#47a2f5"/><stop offset="1" stop-color="#2b6fdc"/></linearGradient></defs><title/><rect fill="url(#linear-gradient)" height="412.22" rx="55.43" width="412.22" x="49.89" y="49.89"/><path d="M217.92,266.2H171v53.15h47V462.11h62.43V320.43H327l9.69-54.23h-56V226.57A33.57,33.57,0,0,1,314.33,193H341V143.49H283.11a64.93,64.93,0,0,0-64.93,64.64Z" fill="#fefefe"/></svg>
</div>