npm

rollup-plugin-inline-svg
TypeScript icon, indicating that this package has built-in type declarations

3.0.3 • Public • Published

rollup-plugin-inline-svg

A rollup plugin for inlining svg files

Build Status Coverage Status

Features

  • Checking validity of SVG files
  • Filtering out attributes and tags with unwrap or delete action
  • Traversing AST of SVG files
  • Zero configuration config

Installation

pnpm install --save-dev rollup-plugin-inline-svg
npm install --save-dev rollup-plugin-inline-svg
yarn add --dev rollup-plugin-inline-svg

Configuration

In 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

Usage

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.

License

MIT, see LICENSE for more information.

Package Sidebar

Install

npm i rollup-plugin-inline-svg

Weekly Downloads

588

Version

3.0.3

License

MIT

Unpacked Size

11.5 kB

Total Files

9

Last publish

Collaborators

  • sionzeecz