react-svg-loader
Optimize svg and load it as a React Component
Last updated a year ago by boopathi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-svg-loader 
SYNC missed versions from official npm registry.

react-svg-loader

Install

npm i react-svg-loader --save-dev

or

yarn add react-svg-loader --dev

Usage

// without webpack loader config
import Image1 from 'react-svg-loader!./image1.svg';

// or if you're passing all .svg files via react-svg-loader,
import Image2 from './image1.svg';

// and use it like any other React Component
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>

Loader output

By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with babel-loader + babel-preset-env to compile it down to your target.

// In your webpack config
{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

SVGO options

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        svgo: {
          plugins: [
            { removeTitle: false }
          ],
          floatPrecision: 2
        }
      }
    }
  ]
}

Internals

Input SVG

SVG Optimize using SVGO

Babel Transform with preset=react and plugin=svgToComponent

Assumptions and Other gotchas

  • Root element is always <svg>
  • SVG is optimized using SVGO

LICENSE

MIT

Current Tags

  • 2.0.0-alpha.3                                ...           alpha (3 years ago)
  • 1.0.0-3                                ...           beta (4 years ago)
  • 3.0.4-alpha.3                                ...           canary (a year ago)
  • 3.0.3                                ...           latest (a year ago)

40 Versions

  • 3.0.4-alpha.3                                ...           a year ago
  • 3.0.4-alpha.2                                ...           a year ago
  • 3.0.3                                ...           a year ago
  • 3.0.2                                ...           a year ago
  • 3.0.2-alpha.2                                ...           a year ago
  • 3.0.2-alpha.1                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.1.1-alpha.36                                ...           2 years ago
  • 2.2.0-alpha.90436959                                ...           3 years ago
  • 2.2.0-alpha.b8e3c6d5                                ...           3 years ago
  • 2.2.0-alpha.02daccb2                                ...           3 years ago
  • 2.2.0-alpha.10f9a762                                ...           3 years ago
  • 2.2.0-alpha.038ff855                                ...           3 years ago
  • 2.2.0-alpha.52f0a7dd                                ...           3 years ago
  • 2.2.0-alpha.a1496904                                ...           3 years ago
  • 2.2.0-nightly.58aa6b3c                                ...           3 years ago
  • 2.2.0-alpha.58aa6b3c                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 2.0.0-alpha.4                                ...           3 years ago
  • 2.0.0-alpha.3                                ...           3 years ago
  • 2.0.0-alpha.2                                ...           3 years ago
  • 2.0.0-alpha.1                                ...           4 years ago
  • 2.0.0-alpha.0                                ...           4 years ago
  • 1.1.1                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
  • 1.0.0-3                                ...           4 years ago
  • 1.0.0-2                                ...           4 years ago
  • 1.0.0-1                                ...           4 years ago
  • 1.0.0-0                                ...           4 years ago
  • 0.1.0                                ...           5 years ago
  • 0.0.6                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
  • 0.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 25
This Week 72
This Month 1,732
Last Day 47
Last Week 431
Last Month 1,441
Dependencies (2)
Dev Dependencies (0)
None
Dependents (121)

Copyright 2014 - 2016 © taobao.org |