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

An Eleventy shortcode, allows atlas-icons to be embedded as inline svg into templates
https://github.com/reatlat/eleventy-plugin-atlasicons

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

Last synced: about 2 months ago
JSON representation

An Eleventy shortcode, allows atlas-icons to be embedded as inline svg into templates

• Host: GitHub
• URL: https://github.com/reatlat/eleventy-plugin-atlasicons
• Owner: reatlat
• License: mit
• Created: 2023-10-29T03:40:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-21T17:37:04.000Z (10 months ago)
• Last Synced: 2024-11-15T22:42:22.705Z (3 months ago)
• Topics: 11ty, 11ty-plugin, atlas, atlas-icons, eleventy, eleventy-plugin, npm-package
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/eleventy-plugin-atlasicons
• Size: 900 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# eleventy-plugin-atlasicons

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

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

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

An Eleventy [shortcode](https://www.11ty.dev/docs/shortcodes/), allows [Atlas icons](https://atlasicons.vectopus.com/) to be embedded as inline svg into templates.

## Installation

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

```

npm install eleventy-plugin-atlasicons --save-dev

```

Add it to your [Eleventy Config](https://www.11ty.dev/docs/config/) file:

```js

const eleventyPluginAtlasicons = require('eleventy-plugin-atlasicons');

module.exports = function (eleventyConfig) {

    eleventyConfig.addPlugin(eleventyPluginAtlasicons);

};

```

Advanced usage:

```js

const eleventyPluginAtlasicons = require('eleventy-plugin-atlasicons');

module.exports = function (eleventyConfig) {

    eleventyConfig.addPlugin(eleventyPluginAtlasicons, {

        class: `atlas-icon`,

        style: `display: inline-block;`,

        category: 'unknown',

        size: 24,

        weight: 'regular', // thin, light, regular, medium, bold

        strokeWidth: 2, // optional

        color: 'currentColor',

        dataIconAttributes: false,

        debug: false

    });

};

```

## What does it do?

The plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) like this:

```nunjucks

{% atlas "like-thumbs-up-sticker" %}

```

or 

```nunjucks

{% atlasicon "like-thumbs-up-sticker" %}

```

into HTML code like this:

```html

    

        

        

        

    

```

## Custom Usage

```nunjucks

{% atlas "like-thumbs-up-sticker", { 

    size: 64,

    class: "atlas-icon bg-currentColor",

    dataIconAttributes: true

} %}

```

## Contributing

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

1. Fork this repo

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

3. Install dependencies `npm install`

4. Build `npm run build`

5. Serve locally `npm run dev`

## Icons License

The icons were created by Ramy Wafaa and are available under the [MIT license](ICONS-LICENSE).

## License

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