sass-inline-svg

A sass function that inlines svg files.

Installation

npm install @liquid-js/sass-inline-svg

API Documentation

https://liquid-js.github.io/sass-inline-svg/

Usage

Simple example

import inlinerFunctions from '@liquid-js/sass-inline-svg'
import { compile } from 'sass'

const result = compile('styles.scss', {
    functions: {
        ...inlinerFunctions,
        // other functions
    }
})
Copy

.logo-icon {
    background: svg("logo.svg");
}
Copy

SVG transformation

The inliner accepts a second argument, a map that describes transformation as { selector: { attribute: value } }.

.logo-icon {
    background: svg("logo.svg", (path: (fill: green), rect: (stroke: white)));
}
Copy

In the above example all path elemens will have fill="green" and all rect elements will have stroke="white".

Configuring the inliner

import { inliner } from '@liquid-js/sass-inline-svg'
import { compile } from 'sass'

const result = compile('styles.scss', {
    functions: {
        'svg($path, $selectors: null)': inliner('[basePath]', {
            // Use SVGO to optimize the code before inlining
            optimize: true,
            // Encode SVG as plain data URI, which is smaller than base64 encoding (but might not be supported on legacy browsers)
            encodingFormat: 'uri'
        })
    }
})
Copy

License

ISC License