Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

svgr.macro

1.0.4 • Public • Published

svgr.macro

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

Travis Codecov Status npm package npm downloads

Dependency Status devDependency Status peerDependency Status

prettier license

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.

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

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'] },
);
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
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

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

Keywords

none

Install

npm i svgr.macro

DownloadsWeekly Downloads

226

Version

1.0.4

License

MIT

Last publish

Collaborators

  • avatar