Narcissistic Project Managers

    eleventy-plugin-boxicons

    0.2.0 • Public • Published

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

    Install

    npm i eleventy-plugin-boxicons

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    4.61 kB

    Total Files

    4

    Last publish

    Collaborators

    • jankollars