rollup-plugin-svgi v0.2.0

rollup-plugin-svgi

Use SVG files in JSX.

Why?

• To import SVG as JSX in Preact/ React using Rollup.
• To use inline svg in JSX

Installation

npm

npm install rollup-plugin-svgi --save-dev

yarn

yarn add rollup-plugin-svgi -D

Usage

// rollup.config.js
import svgi from 'rollup-plugin-svgi';

const config = {/* ... */};

export default {
  entry: 'main.js',
  plugins: [
    svgi(config)
  ]
}

Configuration

The config object passed to the plugin is composed of the following properties:

Basic setup

// main.js
import { h } from 'preact'; // OR import React from 'react';
import Logo from 'path/to/logo.svg';

export default () => (
  <div class="App">
    <div class="App-header">
      <Logo class="App-logo" />
    </div>
  </div>
);

// rollup.config.js
import svgi from 'rollup-plugin-svgi';

export default {
  entry: 'main.js',
  // ...
  plugins: [
    svgi({
      options: {
        jsx: "preact", // Your chosen JSX library
      },
    }),
  ]
}

Advanced setup

/** EXAMPLE 1: Using a different JSX library */

// rollup.config.js
import svgi from 'rollup-plugin-svgi';

export default {
  entry: 'main.js',
  plugins: [
    svgi({
      options: {
        jsx: "inferno-create-element",
        factory: "createElement",
        'default': false // import { createElement } from 'inferno-create-element';
      },
    }),
  ]
}

/** EXAMPLE 2: Using svgo as custom `options.clean` */

// rollup.config.js
import svgi from 'rollup-plugin-svgi';

export default {
  entry: 'main.js',
  plugins: [
    svgi({
      options: {
        jsx: "react",
        exclude: ['**/*.dev.svg', '**/*.max.svg'],
      },
    }),
  ]
}