diff --git a/.eleventy.js b/.eleventy.js index 123f6b6..2baa7d2 100644 --- a/.eleventy.js +++ b/.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`), diff --git a/README.md b/README.md index fcafbaa..71986f3 100644 --- a/README.md +++ b/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: diff --git a/demo/.eleventy.js b/demo/.eleventy.js index 14ff5bf..a9d5318 100644 --- a/demo/.eleventy.js +++ b/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'; + } }); }; \ No newline at end of file diff --git a/demo/index.njk b/demo/index.njk index 00e226a..ab981ba 100644 --- a/demo/index.njk +++ b/demo/index.njk @@ -51,26 +51,6 @@

Installation

Install the plugin from npm:

npm install eleventy-plugin-phosphoricons --save-dev
-

Usage

-

Add it to your Eleventy Config config file:

-
const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
-
-module.exports = function (eleventyConfig) {
-    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);
-};
-
-

Advanced usage:

-
const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
-
-module.exports = function (eleventyConfig) {
-    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
-        class: "phicon",
-        style: "vertical-align: middle;",
-        size: 32,
-        fill: "currentColor"
-    });
-};
-

Configuration

If render is set to image or img, the following attributes can be used:

+

Usage

+

Add it to your Eleventy Config config file:

+ 
const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);
+};
+
+

Advanced usage:

+ 
const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
+        class: "phicon",
+        style: "vertical-align: middle;",
+        size: 32,
+        fill: "currentColor"
+    });
+};
+
+

Using transformFill callback function

+

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.

+

TailwindCSS usage example:

+
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'];
+        }
+    });
+};
+

Demo

SVG Example

@@ -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' } %}

Image example contains 7 child elements.

diff --git a/package-lock.json b/package-lock.json index d4cb64d..2551415 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "eleventy-plugin-phosphoricons", - "version": "1.2.1", + "version": "1.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "eleventy-plugin-phosphoricons", - "version": "1.2.1", + "version": "1.3.0", "license": "MIT", "dependencies": { "@11ty/eleventy": "^2.0.1", diff --git a/package.json b/package.json index 31bf5f5..6ddb3d7 100644 --- a/package.json +++ b/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": {