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