A rollup plugin for inlining svg files
- Checking validity of SVG files
- Filtering out attributes and tags with unwrap or delete action
- Traversing AST of SVG files
- Zero configuration config
pnpm install --save-dev rollup-plugin-inline-svg
npm install --save-dev rollup-plugin-inline-svg
yarn add --dev rollup-plugin-inline-svgIn your rollup.config.js file
import InlineSvg from 'rollup-plugin-inline-svg';
export default {
// Omitted Fields
plugins: [InlineSvg()],
}or more advanced configuration
import InlineSvg, {markAsRemoved} from 'rollup-plugin-inline-svg';
export default {
// Omitted Fields
plugins: [
InlineSvg({
forbidden: {
tags: ['div', 'style:remove'],
attrs: ['width', 'height'],
},
include: ['src/**/*.svg'],
traverse: (node: AstNode) => {
if(node?.name === 'div' && node?.attrs?.['id'] !== undefined) {
// remove all divs with id attributes
markAsRemoved(node) // or markAsUnwrapped
}
},
})
],
}Note: You can read about the options in CHANGELOG.md
import UserIcon from "@icons/user.svg"
document.querySelectorAll(`.icon.user`).forEach((node) => {
node.innerHTML = UserIcon;
})Note: If you are not using custom module resolution, you should append .svg to import path.
MIT, see LICENSE for more information.