https://github.com/reatlat/eleventy-plugin-phosphoricons

A flexible icon family for interfaces, diagrams, presentations — whatever, really.
https://github.com/reatlat/eleventy-plugin-phosphoricons

11ty 11ty-plugin eleventy eleventy-plugin npm-package phosphor-icons

Last synced: 4 months ago
JSON representation

A flexible icon family for interfaces, diagrams, presentations — whatever, really.

• Host: GitHub
• URL: https://github.com/reatlat/eleventy-plugin-phosphoricons
• Owner: reatlat
• License: mit
• Created: 2023-09-18T02:05:34.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-01T07:11:45.000Z (6 months ago)
• Last Synced: 2024-09-30T09:21:17.950Z (4 months ago)
• Topics: 11ty, 11ty-plugin, eleventy, eleventy-plugin, npm-package, phosphor-icons
• Language: JavaScript
• Homepage: https://eleventy-plugin-phosphoricons.netlify.app/
• Size: 245 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# eleventy-plugin-phosphoricons

[![npm](https://img.shields.io/npm/v/eleventy-plugin-phosphoricons.svg)](https://npmjs.com/package/eleventy-plugin-phosphoricons)

[![npm](https://img.shields.io/npm/dt/eleventy-plugin-phosphoricons.svg)](https://npmjs.com/package/eleventy-plugin-phosphoricons)

[![license](https://img.shields.io/npm/l/eleventy-plugin-phosphoricons.svg)](https://npmjs.com/package/eleventy-plugin-phosphoricons)

An 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.

Demo: [https://eleventy-plugin-phosphoricons.netlify.app/](https://eleventy-plugin-phosphoricons.netlify.app/)

## Installation

Install the plugin from [npm](https://www.npmjs.com/package/eleventy-plugin-phosphoricons):

```

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:

```js

const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');

module.exports = function (eleventyConfig) {

    eleventyConfig.addPlugin(eleventyPluginPhosphoricons);

};

```

### Advanced usage:

```js

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:

```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:

```liquid

{% phosphor "phosphor-logo" %}

```

or 

```liquid

{% phicon "phosphor-logo" %}

```

into HTML code like this:

```html

    

```

or 

```liquid

{% phicon "phosphor-logo", { render: 'image' } %}

```

into HTML code like this:

```html



```

## Custom Usage

```liquid

{% phicon "phosphor-logo", "duotone", { 

    style: "color:red" 

    size: 64,

    class: "phicon bg-blue"

} %}

```

## Contributing

If you notice an issue, feel free to [open an issue](https://github.com/reatlat/eleventy-plugin-phosphoricons/issues).

1. Fork this repo

2. Clone `git clone [email protected]:reatlat/eleventy-plugin-phosphoricons.git`

3. Install dependencies `npm install`

4. Build `npm run build`

5. Serve locally `npm run dev`

## License

The code is available under the [MIT license](LICENSE).