Merge pull request #5 from reatlat/develop

added TransformFill functionality

.eleventy.js

@@ -12,6 +12,8 @@ module.exports = (eleventyConfig, attributes = {}) => {
         decoding: `async`,
         altPrefix: `icon`,
         eleventyIgnore: true,
+        transformClass: false,
+        transformFill: undefined
     }
 
     const globalAttributes = { ...defaultAttributes, ...attributes };
@@ -32,7 +34,6 @@ module.exports = (eleventyConfig, attributes = {}) => {
 
         attributes.render = attributes.render.toLowerCase();
 
-        console.log(`attributes`,attributes);
         if (!['regular', 'thin', 'light', 'bold', 'fill', 'duotone'].includes(iconType)) {
             iconType = 'regular';
         }
@@ -51,6 +52,15 @@ module.exports = (eleventyConfig, attributes = {}) => {
             console.warn(`[eleventy-plugin-phosphoricons] the render attribute must be one of the following: svg, image, img. Defaulting to svg.`);
         }
 
+        if (typeof attributes.transformFill === 'function' && attributes.transformClass) {
+            try {
+                attributes.fill = attributes.transformFill(attributes.transformClass);
+            } catch (error) {
+                console.warn(`[eleventy-plugin-phosphoricons] the transformFill function failed: ${error}`);
+                console.warn(`[eleventy-plugin-phosphoricons] the attributes.transformClass will be ignored`);
+            }
+        }
+
         // safety get SVG content
         const svgContent = fs.readFileSync(
             path.join(phosphorCorePath, `./${iconType}/${fileName}.svg`),

README.md

@@ -14,6 +14,26 @@ Install the plugin from [npm](https://www.npmjs.com/package/eleventy-plugin-phos
 npm install eleventy-plugin-phosphoricons --save-dev
 ```
 
+## Configuration
+
+- `class` - The class attribute to be added to the svg element. Default: `phicon`
+- `style` - The style attribute to be added to the svg element. Default: `undefined`
+- `size` - The width and height attribute to be added to the svg element. Default: `256`
+- `fill` - The fill attribute to be added to the svg element. Default: `currentColor`
+- `width` - The width attribute to be added to the img element. Default: taken from the `size` attribute
+- `height` - The height attribute to be added to the img element. Default: taken from the `size` attribute
+- `render` - The render method allows you to render icon as inline svg or image. Default: `svg`, other options: `image` or `img`
+- `transformClass` - A CSS class that you want to map using a callback function `transformFill`. Default: `false`
+- `transformFill` - A callback function to transform the fill attribute, based on `transformClass` attribute. Default: `undefined`
+
+If `render` is set to `image` or `img`, the following attributes can be used:
+- `alt` - The alt attribute to be added to the img element. Default: `altPrefix + iconName`
+- `altPrefix` - The alt attribute prefix to be added to the img element. Default: `icon`
+- `loading` - The loading attribute to be added to the img element. Default: `lazy`
+- `decoding` - The decoding attribute to be added to the img element. Default: `async`
+- `eleventyIgnore` - The eleventyIgnore attribute to be added to the img element to prevent `@11ty/eleventy-img` plugin from processing the image. Default: `true`
+
+## Usage
 
 Add it to your [Eleventy Config](https://www.11ty.dev/docs/config/) file:
 
@@ -26,7 +46,7 @@ module.exports = function (eleventyConfig) {
 ```
 
 
-Advanced usage:
+### Advanced usage:
 
 ```js
 const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
@@ -41,22 +61,31 @@ module.exports = function (eleventyConfig) {
 };
 ```
 
-## Configuration
+#### Using `transformFill` callback function
 
-- `class` - The class attribute to be added to the svg element. Default: `phicon`
-- `style` - The style attribute to be added to the svg element. Default: `undefined`
-- `size` - The width and height attribute to be added to the svg element. Default: `256`
-- `fill` - The fill attribute to be added to the svg element. Default: `currentColor`
-- `width` - The width attribute to be added to the img element. Default: taken from the `size` attribute
-- `height` - The height attribute to be added to the img element. Default: taken from the `size` attribute
-- `render` - The render method allows you to render icon as inline svg or image. Default: `svg`, other options: `image` or `img`
+May be useful if you using a CSS framework like Tailwind CSS, Bootstrap, etc. and you want to map the fill attribute to the text color classes.
 
-If `render` is set to `image` or `img`, the following attributes can be used:
-- `alt` - The alt attribute to be added to the img element. Default: `altPrefix + iconName`
-- `altPrefix` - The alt attribute prefix to be added to the img element. Default: `icon`
-- `loading` - The loading attribute to be added to the img element. Default: `lazy`
-- `decoding` - The decoding attribute to be added to the img element. Default: `async`
-- `eleventyIgnore` - The eleventyIgnore attribute to be added to the img element to prevent `@11ty/eleventy-img` plugin from processing the image. Default: `true`
+TailwindCSS usage example:
+
+```js
+const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
+const resolveConfig = require('tailwindcss/resolveConfig.js')
+const tailwindConfig = require('tailwind.config.js')
+
+const fullConfig = resolveConfig(tailwindConfig)
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
+        class: "phicon",
+        style: "vertical-align: middle;",
+        size: 32,
+        fill: "currentColor",
+        transformFill: (color) => {
+            const [baseColor, shade] = color.replace('text-', '').split('-');
+            return shade ? fullConfig.theme.colors[baseColor][shade] : fullConfig.theme.colors[baseColor]['DEFAULT'];
+        }
+    });
+};
+```
 
 ## What does it do?
 The plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) like this:

demo/.eleventy.js

@@ -2,6 +2,9 @@ const eleventyPluginPhosphoricons = require("../.eleventy.js");
 
 module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
-        size: 40
+        size: 40,
+        transformFill: (fill) => {
+            return fill.replace("text-", "") || 'currentColor';
+        }
     });
 };

demo/index.njk

@@ -51,26 +51,6 @@
     <h2>Installation</h2>
     <p>Install the plugin from npm:</p>
     <pre><code>npm install eleventy-plugin-phosphoricons --save-dev</code></pre>
-    <h2>Usage</h2>
-    <p>Add it to your <a href="https://www.11ty.dev/docs/config/">Eleventy Config</a> config file:</p>
-<pre><code>const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
-
-module.exports = function (eleventyConfig) {
-    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);
-};
-</code></pre>
-    <p>Advanced usage:</p>
-<pre><code>const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
-
-module.exports = function (eleventyConfig) {
-    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
-        class: "phicon",
-        style: "vertical-align: middle;",
-        size: 32,
-        fill: "currentColor"
-    });
-};
-</code></pre>
     <h2>Configuration</h2>
     <ul>
         <li><code>class</code> - The class attribute to be added to the svg element.<br/><small>Default: <code>phicon</code></small></li>
@@ -80,6 +60,8 @@ module.exports = function (eleventyConfig) {
         <li><code>width</code> - The width attribute to be added to the img element.<br/><small> taken from the <code>size</code> attribute</small></li>
         <li><code>height</code> - The height attribute to be added to the img element.<br/><small> taken from the <code>size</code> attribute</small></li>
         <li><code>render</code> - The render method allows you to render icon as inline svg or image.<br/><small>Default: <code>svg</code>, other options: <code>image</code> or <code>img</code></small></li>
+        <li><code>transformClass</code> - A CSS class that you want to map using a callback function <code>transformFill</code>.<br/><small>Default: <code>false</code></small></li>
+        <li><code>transformFill</code> - A callback function that allows you to transform the fill attribute based on the <code>transformClass</code> attribute.<br/><small>Default: <code>undefined</code></small></li>
     </ul>
     <h3><small>If <code>render</code> is set to <code>image</code> or <code>img</code>, the following attributes can be used:</small></h3>
     <ul>
@@ -89,6 +71,47 @@ module.exports = function (eleventyConfig) {
         <li><code>decoding</code> - The decoding attribute to be added to the img element.<br/><small>Default: <code>async</code></small></li>
         <li><code>eleventyIgnore</code> - The eleventyIgnore attribute to be added to the img element to prevent <code>@11ty/eleventy-img</code> plugin from processing the image.<br/><small>Default: <code>true</code></small></li>
     </ul>
+    <h2>Usage</h2>
+    <p>Add it to your <a href="https://www.11ty.dev/docs/config/">Eleventy Config</a> config file:</p>
+    <pre><code>const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);
+};
+</code></pre>
+    <h3>Advanced usage:</h3>
+    <pre><code>const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
+        class: "phicon",
+        style: "vertical-align: middle;",
+        size: 32,
+        fill: "currentColor"
+    });
+};
+</code></pre>
+    <h4>Using <code>transformFill</code> callback function</h4>
+    <p>May be useful if you using a CSS framework like Tailwind CSS, Bootstrap, etc. and you want to map the fill attribute to the text color classes.</p>
+    <p>TailwindCSS usage example:</p>
+<pre><code>const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
+const resolveConfig = require('tailwindcss/resolveConfig.js')
+const tailwindConfig = require('tailwind.config.js')
+
+const fullConfig = resolveConfig(tailwindConfig)
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
+        class: "phicon",
+        style: "vertical-align: middle;",
+        size: 32,
+        fill: "currentColor",
+        transformFill: (color) => {
+            const [baseColor, shade] = color.replace('text-', '').split('-');
+            return shade ? fullConfig.theme.colors[baseColor][shade] : fullConfig.theme.colors[baseColor]['DEFAULT'];
+        }
+    });
+};
+</code></pre>
     <h2>Demo</h2>
     <h3>SVG Example</h3>
     <div class="flex flex-wrap gap-2">
@@ -108,7 +131,7 @@ module.exports = function (eleventyConfig) {
     {% phicon "phosphor-logo", "light", { render: 'image' } %}
     {% phicon "phosphor-logo", "", { render: 'image' } %}
     {% phicon "phosphor-logo", "bold", { render: 'image' } %}
-    {% phicon "phosphor-logo", "fill", { render: 'image' } %}
+    {% phicon "phosphor-logo", "fill", { render: 'image', transformClass: 'text-blue' } %}
     {% phicon "phosphor-logo", "duotone", { style: "color:red", render: 'image' } %}
     </div>
     <p>Image example contains 7 child elements.</p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-plugin-phosphoricons",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A flexible icon family for interfaces, diagrams, presentations — whatever, really.",
   "main": ".eleventy.js",
   "scripts": {