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 [email protected] .)

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.

Related issue: https://github.com/facebook/create-react-app/issues/3856

Example

evenchange4/svgr.macro-example (with [email protected]) [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

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests.

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org