JSPM

rollup-plugin-svg

2.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 68295
  • Score
    100M100P100Q136903F
  • License MIT

Import SVG images

Package Exports

  • rollup-plugin-svg

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-svg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rollup-plugin-svg

Import SVG files as base64, or as Markup

CircleCI JavaScript Style Guide

Installation

npm i -D rollup-plugin-svg

Usage

// rollup.config.js
import svg from 'rollup-plugin-svg'

export default {
  entry: 'src/input.js',
  dest: 'dist/output.js',
  plugins: [
    svg()
  ]
}

You can then use svgs in your bundle thusly:

import logo from './desirable-objects.svg'

// Without base64:
document.body.appendChild( logo )

// With base64:
<img src="{logo}" alt="Whatever" />

Options:

base64

Defaults to false.

Bas64 encoded SVGs will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost.

Sources

This plugin was built (based on the rollup-plugin-image plugin) because it appears that the two existing suitable plugins:

rollup-plugin-image rollup-plugin-url

don't seem to work any more. I wanted a simple solution to provide SVG images to Vudash

License

MIT