JSFiddle - React, Tailwind, and code Playground
SCSS
/*
If you don't need every single FontAwesome icon in your stylesheet.
*/
/* Import these from FontAwesome */
@import "font-awesome/variables";
@import "font-awesome/mixins";
@import "font-awesome/path";
@import "font-awesome/core";
/*
Pick out the icons you want to use.
First, the class-name (eg. reorder => .icon-reorder). This can be renamed to whatever.
Second, the icon variable (usually the same as the original class-name).
*/
$icons:
reorder $reorder,
picture $picture,
flag $flag
;
/*
SCSS automagically outputs the icons for you.
*/
@each $icon in $icons {
.icon-#{nth($icon, 1)}:before { content: nth($icon, 2); }
}