https://github.com/reatlat/eleventy-plugin-feathericons
An Eleventy shortcode, allows feather-icons to be embedded as inline svg into templates.
https://github.com/reatlat/eleventy-plugin-feathericons
11ty 11ty-plugin eleventy eleventy-plugin feather feather-icons npm-package
Last synced: 4 months ago
JSON representation
An Eleventy shortcode, allows feather-icons to be embedded as inline svg into templates.
- Host: GitHub
- URL: https://github.com/reatlat/eleventy-plugin-feathericons
- Owner: reatlat
- License: mit
- Created: 2022-05-21T18:57:42.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-02T10:06:52.000Z (8 months ago)
- Last Synced: 2025-01-27T08:33:27.407Z (4 months ago)
- Topics: 11ty, 11ty-plugin, eleventy, eleventy-plugin, feather, feather-icons, npm-package
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/eleventy-plugin-feathericons
- Size: 411 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-plugin-feathericons
[](https://npmjs.com/package/eleventy-plugin-feathericons)
[](https://npmjs.com/package/eleventy-plugin-feathericons)
[](https://npmjs.com/package/eleventy-plugin-feathericons)
An Eleventy [shortcode](https://www.11ty.dev/docs/shortcodes/), allows [Feather icons](https://feathericons.com/) to be embedded as inline svg into templates.
## Installation
Install the plugin from [npm](https://www.npmjs.com/package/eleventy-plugin-feathericons):
```
npm install eleventy-plugin-feathericons --save-dev
```
Add it to your [Eleventy Config](https://www.11ty.dev/docs/config/) file:
```js
const eleventyPluginFeathericons = require('eleventy-plugin-feathericons');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginFeathericons);
};
```
Advanced usage:
```js
const eleventyPluginFeathericons = require('eleventy-plugin-feathericons');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyPluginFeathericons, {
"class": "feather feather-x",
"xmlns": "http://www.w3.org/2000/svg",
"width": 24,
"height": 24,
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"stroke-width": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round",
});
};
```
## What does it do?
The plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) like this:
```nunjucks
{% feather "feather" %}
```
into HTML code like this:
```html
```
## Custom Usage
```nunjucks
{% feather "activity", {
"stroke": "#ff0000",
"stroke-width": 3
} %}
```
## Contributing
If you notice an issue, feel free to [open an issue](https://github.com/reatlat/eleventy-plugin-feathericons/issues).
1. Fork this repo
2. Clone `git clone [email protected]:reatlat/eleventy-plugin-feathericons.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).
## May the 4th be with you
