Eleventy Plugin Boxicons
Eleventy plugin which provides a shortcode to inline SVGs from the Boxicons collection.
Installation
Install the necessary modules in your project.
npm install --save boxicons eleventy-plugin-boxicons
Then register the plugin in your .eleventy.js
file.
const eleventyBoxicons = require('eleventy-plugin-boxicons')
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyBoxicons)
}
Usage
Plugin options
When adding the plugin (as done described above), you can pass options to the plugin.
option | description | default |
---|---|---|
classNames | string which should be added to the class attribute | '' |
Example:
eleventyConfig.addPlugin(eleventyBoxicons, {
classNames: 'boxicon another-class'
})
Shortcode
The shortcode is called boxicon
and takes two arguments. The first one is the icon's name and the second one is the type.
arguments | description | default |
---|---|---|
0 | icon's name | |
1 | type 'regular' , 'solid' or 'logos'
|
'regular' |
Example:
{% boxicon "github", "logos" %}
Bonus
There is a helper function which behaves just like the shortcode. You can use it to e.g. create your own shortcode which wraps the icon. On my personal blog, I have a shortcode which creates an icon with a link to someone's social media profile.
const { getBoxicon } = require('eleventy-plugin-boxicons')
function socialLink(socialNetwork, link, title) {
return `
<a
class="social-icon"
href="${link}"
title="${title || `go to ${socialNetwork}`}">${getBoxicon(socialNetwork, 'logos')}
</a>`
}