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.
To install the package, run
npm install tailwindcss-svg-icon-color --save-dev
yarn add -D tailwindcss-svg-icon-color
In your tailwind.config.js
file, import the plugin as follows.
const svgIconColor = require("tailwindcss-svg-icon-color");
module.exports = {
plugins: [svgIconColor],
};
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" />