{"id":15016626,"url":"https://github.com/reatlat/eleventy-plugin-phosphoricons","last_synced_at":"2025-12-24T03:52:18.098Z","repository":{"id":195890615,"uuid":"692933465","full_name":"reatlat/eleventy-plugin-phosphoricons","owner":"reatlat","description":"A flexible icon family for interfaces, diagrams, presentations — whatever, really.","archived":false,"fork":false,"pushed_at":"2024-08-01T07:11:45.000Z","size":251,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-21T13:13:33.844Z","etag":null,"topics":["11ty","11ty-plugin","eleventy","eleventy-plugin","npm-package","phosphor-icons"],"latest_commit_sha":null,"homepage":"https://eleventy-plugin-phosphoricons.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reatlat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"reatlat","custom":"https://www.paypal.me/reatlat"}},"created_at":"2023-09-18T02:05:34.000Z","updated_at":"2024-08-23T12:39:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ca39e15-ac37-49fd-817c-1b7ce19ae172","html_url":"https://github.com/reatlat/eleventy-plugin-phosphoricons","commit_stats":{"total_commits":24,"total_committers":3,"mean_commits":8.0,"dds":"0.16666666666666663","last_synced_commit":"444cae3a918258a23d80619ca05aed41422f4829"},"previous_names":["reatlat/eleventy-plugin-phosphoricons"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/reatlat/eleventy-plugin-phosphoricons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reatlat%2Feleventy-plugin-phosphoricons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reatlat%2Feleventy-plugin-phosphoricons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reatlat%2Feleventy-plugin-phosphoricons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reatlat%2Feleventy-plugin-phosphoricons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reatlat","download_url":"https://codeload.github.com/reatlat/eleventy-plugin-phosphoricons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reatlat%2Feleventy-plugin-phosphoricons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261300657,"owners_count":23137838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","npm-package","phosphor-icons"],"created_at":"2024-09-24T19:49:09.639Z","updated_at":"2025-12-24T03:52:18.092Z","avatar_url":"https://github.com/reatlat.png","language":"JavaScript","funding_links":["https://github.com/sponsors/reatlat","https://www.paypal.me/reatlat"],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-phosphoricons\n[![npm](https://img.shields.io/npm/v/eleventy-plugin-phosphoricons.svg)](https://npmjs.com/package/eleventy-plugin-phosphoricons)\n[![npm](https://img.shields.io/npm/dt/eleventy-plugin-phosphoricons.svg)](https://npmjs.com/package/eleventy-plugin-phosphoricons)\n[![license](https://img.shields.io/npm/l/eleventy-plugin-phosphoricons.svg)](https://npmjs.com/package/eleventy-plugin-phosphoricons)\n\nAn Eleventy [shortcode](https://www.11ty.dev/docs/shortcodes/), allows [Phosphor icons](https://phosphoricons.com/) to be embedded as inline svg or render as an image in your Eleventy project.\n\nDemo: [https://eleventy-plugin-phosphoricons.netlify.app/](https://eleventy-plugin-phosphoricons.netlify.app/)\n\n## Requirements\n\n- Eleventy 2.0 or higher (CJS) / Eleventy 3.0 or higher (ESM)\n\n## Installation\nInstall the plugin from [npm](https://www.npmjs.com/package/eleventy-plugin-phosphoricons):\n\n```\nnpm install eleventy-plugin-phosphoricons --save-dev\n```\n\n## Configuration\n\n- `class` - The class attribute to be added to the svg element. Default: `phicon`\n- `style` - The style attribute to be added to the svg element. Default: `undefined`\n- `size` - The width and height attribute to be added to the svg element. Default: `256`\n- `fill` - The fill attribute to be added to the svg element. Default: `currentColor`\n- `width` - The width attribute to be added to the img element. Default: taken from the `size` attribute\n- `height` - The height attribute to be added to the img element. Default: taken from the `size` attribute\n- `render` - The render method allows you to render icon as inline svg or image. Default: `svg`, other options: `image` or `img`\n- `transformClass` - A CSS class that you want to map using a callback function `transformFill`. Default: `false`\n- `transformFill` - A callback function to transform the fill attribute, based on `transformClass` attribute. Default: `undefined`\n\nIf `render` is set to `image` or `img`, the following attributes can be used:\n- `alt` - The alt attribute to be added to the img element. Default: `altPrefix + iconName`\n- `altPrefix` - The alt attribute prefix to be added to the img element. Default: `icon`\n- `loading` - The loading attribute to be added to the img element. Default: `lazy`\n- `decoding` - The decoding attribute to be added to the img element. Default: `async`\n- `eleventyIgnore` - The eleventyIgnore attribute to be added to the img element to prevent `@11ty/eleventy-img` plugin from processing the image. Default: `true`\n\n## Usage\n\nAdd it to your [Eleventy Config](https://www.11ty.dev/docs/config/) file:\n\n**ESM (Eleventy 3.x):**\n\n```js\nimport eleventyPluginPhosphoricons from 'eleventy-plugin-phosphoricons';\n\nexport default function (eleventyConfig) {\n    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);\n};\n```\n\n**CommonJS (Eleventy 2.x):**\n\n```js\nconst eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');\n\nmodule.exports = function (eleventyConfig) {\n    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);\n};\n```\n\n### Advanced usage:\n\n```js\nimport eleventyPluginPhosphoricons from 'eleventy-plugin-phosphoricons';\n\nexport default function (eleventyConfig) {\n    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {\n        class: \"phicon\",\n        style: \"vertical-align: middle;\",\n        size: 32,\n        fill: \"currentColor\"\n    });\n};\n```\n\n#### Using `transformFill` callback function\n\nMay 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.\n\nTailwindCSS usage example:\n\n```js\nimport eleventyPluginPhosphoricons from 'eleventy-plugin-phosphoricons';\nimport resolveConfig from 'tailwindcss/resolveConfig.js';\nimport tailwindConfig from './tailwind.config.js';\n\nconst fullConfig = resolveConfig(tailwindConfig);\n\nexport default function (eleventyConfig) {\n    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {\n        class: \"phicon\",\n        style: \"vertical-align: middle;\",\n        size: 32,\n        fill: \"currentColor\",\n        transformFill: (color) =\u003e {\n            const [baseColor, shade] = color.replace('text-', '').split('-');\n            return shade ? fullConfig.theme.colors[baseColor][shade] : fullConfig.theme.colors[baseColor]['DEFAULT'];\n        }\n    });\n};\n```\n\n## What does it do?\nThe plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) like this:\n\n```liquid\n{% phosphor \"phosphor-logo\" %}\n```\n\nor\n\n```liquid\n{% phicon \"phosphor-logo\" %}\n```\n\ninto HTML code like this:\n\n```html\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\n     viewBox=\"0 0 256 256\"\n     fill=\"currentColor\"\n     class=\"phicon\"\n     style=\"vertical-align: middle;\"\n     width=\"32\" height=\"32\"\u003e\n    \u003cpath d=\"M144,24H64a8,8,0,0,0-8,8V160a80.09...\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n```\n\n## Template Usage\n\n### Nunjucks\n\nWith object attributes:\n\n```nunjucks\n{% phicon \"phosphor-logo\", \"duotone\", {\n    style: \"color:red\",\n    size: 64,\n    class: \"phicon bg-blue\"\n} %}\n```\n\nRender as image:\n\n```nunjucks\n{% phicon \"phosphor-logo\", \"fill\", { render: 'image' } %}\n```\n\n### Liquid\n\nWith extra CSS classes (string):\n\n```liquid\n{% phicon \"star\" \"fill\" \"text-yellow-500 hover:scale-110\" %}\n```\n\nBasic usage:\n\n```liquid\n{% phicon \"phosphor-logo\" %}\n{% phicon \"phosphor-logo\" \"duotone\" %}\n```\n\n## Icon Types\n\nSix icon variants are available: `regular` (default), `thin`, `light`, `bold`, `fill`, `duotone`\n\n```liquid\n{% phicon \"heart\" %}\n{% phicon \"heart\" \"thin\" %}\n{% phicon \"heart\" \"light\" %}\n{% phicon \"heart\" \"bold\" %}\n{% phicon \"heart\" \"fill\" %}\n{% phicon \"heart\" \"duotone\" %}\n```\n\n## Contributing\nIf you notice an issue, feel free to [open an issue](https://github.com/reatlat/eleventy-plugin-phosphoricons/issues).\n\n1. Fork this repo\n2. Clone `git clone git@github.com:reatlat/eleventy-plugin-phosphoricons.git`\n3. Install dependencies `npm install`\n4. Build `npm run build`\n5. Serve locally `npm run dev`\n\n\n## License\nThe code is available under the [MIT license](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freatlat%2Feleventy-plugin-phosphoricons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freatlat%2Feleventy-plugin-phosphoricons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freatlat%2Feleventy-plugin-phosphoricons/lists"}