A plugin is to add some variants for Font Awesome kit on svg technology.
There are two ways to install.
# 1. by yarn
yarn add -D tailwindcss tailwindcss-fa-i2svg-variants
# 2. by npm
npm i --save-dev tailwindcss tailwindcss-fa-i2svg-variants
# If npm@>=7 is, you can omit tailwindcss.
# npm installs it automatically.
npm i --save-dev tailwindcss-fa-i2svg-variantsFirst, You put this plugin to plugins of your tailwindcss config.
const faI2svgVariants = require('tailwindcss-fa-i2svg-variants')
module.exports = {
// ...
plugins: [faI2svgVariants]
// ...
}Here, You can use three variants following like:
fa-i2svg-activefor.fontawesome-i2svg-activefa-i2svg-pendingfor.fontawesome-i2svg-pendingfa-i2svg-completefor.fontawesome-i2svg-complete
Next, You put those variants too. For instance, You think what "I'd like to use with display theme", then you can be following like:
const faI2svgVariants = require('tailwindcss-fa-i2svg-variants')
const defaults = require('tailwindcss/defaultConfig')
module.exports = {
// ...
variants: {
extend: {
display: [
...defaults.variants.display,
'fa-i2svg-active',
'fa-i2svg-pending',
'fa-i2svg-complete'
]
}
},
plugins: [faI2svgVariants]
// ...
}Everything is ready!
After, you just use generated classes for your .html, .jsx, .tsx or .vue etc.
Of course, It is with the appropriate how-two of Font Awesome.
<body class="hidden fa-i2svg-active:block">
</body>