Naphthalene Possum Management

    less-plugin-inline-svg

    2.0.1 • Public • Published

    less-plugin-inline-svg

    NPM version Dependencies devDependency Status optionalDependency Status

    A Less plugin that allows to inline SVG file and customize its CSS styles

    Installation

    You can install the library using NPM:

    npm install less-plugin-inline-svg

    or by Yarn:

    yarn add less-plugin-inline-svg

    Example usage with Less CLI

    lessc --inline-svg file.less file.css
    lessc --inline-svg="base64=true" file.less file.css
    lessc --inline-svg="encode=true" file.less file.css

    Programmatic usage

    const less = require('less');
    const LessPluginInlineSvg = require('less-plugin-inline-svg');
     
    const inlineSvg = new LessPluginInlineSvg({
      base64: true
    });
     
    const options = {
        plugins: [ inlineSvg ]
    };
     
    less.render(css, options)
        .then(...);

    Options

    • options.encode (boolean)

      default: false - Turn on SVG entities encoding for the SVG output.

    • options.base64 (boolean)

      default: false - Turn on Base64 encoding for the SVG output.

    Usage and motivation

    Let's imagine you would like to inline an SVG image file into your CSS code and use it as a background. Additionally, you would like to pass a custom SVG styling attributes that will change ex. the filling color of the image.

    Example

    Sample SVG file:

    src/images/my-image.svg

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="64" height="64">
      <path id="my-icon" d="M7.5,0.5c3.9,0,7,3.1,7,7c0,3.9-3.1,7-7,7c-3.9,0-7-3.1-7-7l0,0C0.5,3.6,3.6,0.5,7.5,0.5 C7.5,0.5,7.5,0.5,7.5,0.5L7.5,0.5L7.5,0.5z M6.1,4.7v5.6l4.2-2.8L6.1,4.7z"/>
    </svg>

    For the less file:

    src/less/my-styles.less

    .foo-style {
        background-image: inline-svg('../images/my-image.svg''my-icon''fill: blue');
    }

    After compiling:

    lessc -inline-svg less/my-styles.less css/my-styles.css

    The produced output would look like this:

    .foo-style {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="64" height="64"><path id="my-icon" d="M7.5,0.5c3.9,0,7,3.1,7,7c0,3.9-3.1,7-7,7c-3.9,0-7-3.1-7-7l0,0C0.5,3.6,3.6,0.5,7.5,0.5 C7.5,0.5,7.5,0.5,7.5,0.5L7.5,0.5L7.5,0.5z M6.1,4.7v5.6l4.2-2.8L6.1,4.7z" fill="blue"/></svg>');
    }
     

    Helpe syntax

    background-image: inline-svg('<<image path>>''<<ID attribute of SVG node>>''<<custom styling attributes that will be passed to found SVG node>>');

    Interpolations

    Thanks to the Less build-in variables and string interpolations you can pass the variable value to the helper:

    .foo-style {
        @color: 'red';
     
        background-image: inline-svg('../images/my-image.svg''my-icon''fill: @{color}');
    }

    SVG Encoding

    Some browser might not like the raw SVG code inlined into the CSS files. You can turn on the encoding option and encode the SVG entities (ex. <, >, =, " etc.) before outputting the code to CSS file. The encoding function is using encodeURIComponent JavaScript function and returns URI safe data.

    Example:

    const inlineSvg = new LessPluginInlineSvg({
      encode: true
    });

    Base64 Encoding

    You can also turn on the Base64 encoding by passing the base64: true option. This will encode the SVG result and make it binary safe to inline in the CSS file. Turning this option on, will increase the size of inline output for about 33%.

    Example:

    const inlineSvg = new LessPluginInlineSvg({
      base64: true
    });

    Similar projects

    Install

    npm i less-plugin-inline-svg

    DownloadsWeekly Downloads

    8

    Version

    2.0.1

    License

    Apache-2.0

    Unpacked Size

    19.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • macku