A sass function that inlines svg files
npm install @liquid-js/sass-inline-svgjs
import inlinerFunctions from '@liquid-js/sass-inline-svg'
import { compile } from 'sass'
const result = compile('styles.scss', {
functions: {
...inlinerFunctions,
// other functions
}
})
`
`scss
.logo-icon {
background: svg("logo.svg");
}
`
$3
The inliner accepts a second argument, a map that describes transformation as { selector: { attribute: value } }.
`scss
.logo-icon {
background: svg("logo.svg", (path: (fill: green), rect: (stroke: white)));
}
`
In the above example all path elemens will have fill="green" and all rect elements will have stroke="white".
$3
`js
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'
})
}
})
``