An Eleventy shortcode, allows Phosphor icons to be embedded as inline svg into templates.
Install the plugin from npm:
npm install eleventy-plugin-phosphoricons --save-dev
Add it to your Eleventy 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"
});
};
The plugin turns 11ty shortcodes like this:
{% phosphor "phosphor-logo" %}
or
{% phicon "phosphor-logo" %}
into HTML code like this:
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
fill="currentColor"
class="phicon"
style="vertical-align: middle;"
width="32" height="32">
<path d="M144,24H64a8,8,0,0,0-8,8V160a80.09,80.09,0,0,0,80,80,8,8,0,0,0,8-8V168a72,72,0,0,0,0-144ZM72,62.54,122.32,152H72Zm56,66.92L77.68,40H128ZM72.51,168H128v55.5A64.14,64.14,0,0,1,72.51,168ZM144,152V40a56,56,0,0,1,0,112Z"></path>
</svg>
{% phicon "phosphor-logo", "duotone", {
style: "color:red"
size: 64,
class: "phicon bg-blue"
} %}
If you notice an issue, feel free to open an issue.
- Fork this repo
- Clone
git clone git@github.com:reatlat/eleventy-plugin-phosphoricons.git
- Install dependencies
npm install
- Build
npm run build
- Serve locally
npm run dev
The code is available under the MIT license.