1.0.8 • Published 27 days ago
tailwindcss-svg-icon-color v1.0.8
tailwindcss-svg-icon-color
A plugin that adds the icon-color-...
utility class to your arsenal of classes to use on svg's.
Assuming the icon's are designed and exported to only obtain their colors from the fill property set on the path.
Installation
To install the package, run
npm install tailwindcss-svg-icon-color --save-dev
yarn add -D tailwindcss-svg-icon-color
Config
In your tailwind.config.js
file, import the plugin as follows.
const svgIconColor = require("tailwindcss-svg-icon-color");
module.exports = {
plugins: [svgIconColor],
};
Example usage
The class targets the path
property in the svg and adds a fill color from the theme file.
<IconArrowRight className="icon-color-yellow-400 hover:icon-color-yellow-200 [&>path]:transition-all [&>path]:duration-300" />