Awesome

svgr.macro

Run svgr at build-time with babel-plugin-macros.

Installation

$ yarn add svgr.macro

Note: You'll need to install and configure babel-plugin-macros if you haven't already. (This can be omitted when using CRA react-script@2.x .)

Caveats

Bundle size impact

The macro solution is not suggested for every use case. If you import the same svg across multiple files, it will inflate the bundle size.

You should separate the svgr.macro function to a single file and import components from there. Please check the example structure.

Example

evenchange4/svgr.macro-example (with react-script@2.x) [DEMO]

Usage

Single file

import toReactComponent from 'svgr.macro';
const Logo = toReactComponent('./fixtures/logo.svg');

      ↓ ↓ ↓ ↓ ↓ ↓

const Logo = props => <svg width={116} height={28} viewBox="0 0 116 28" {...props}>
    <g fill="none" fillRule="evenodd">
      ...

Glob pattern

import toReactComponent from 'svgr.macro';
const { DoneBlack, Autorenew } = toReactComponent(
  './fixtures/material/*.svg',
  { 
    icon: true, 
    replaceAttrValues: ['#61DAFB=currentColor'],
    svgo: NODE_ENV === 'production',
  },
);

      ↓ ↓ ↓ ↓ ↓ ↓

const {
  DoneBlack,
  Autorenew
} = {
  "Autorenew": props => <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
    ...
  </svg>,
  "DoneBlack": props => <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
    ...
  </svg>
};

Options

Alternative

https://github.com/smooth-code/svgr#webpack-usage

Development

Requirements

node >= 9.4.0
yarn >= 1.3.2

$ yarn install --pure-lockfile

Test

$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run build