Skip to content

A plugin is to add some variants for Font Awesome kit on svg technology.

License

Notifications You must be signed in to change notification settings

nju33/tailwindcss-fa-i2svg-variants

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tailwindcss-fa-i2svg-variants

A plugin is to add some variants for Font Awesome kit on svg technology.

Test JavaScript Style Guide code style: prettier

Install Packages

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-variants

Use The Plugin

First, 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:

  1. fa-i2svg-active for .fontawesome-i2svg-active
  2. fa-i2svg-pending for .fontawesome-i2svg-pending
  3. fa-i2svg-complete for .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>

References