svg-to-component-loader
Webpack loader to import SVG as React/Vue component
Last updated 3 years ago by rem .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install svg-to-component-loader 
SYNC missed versions from official npm registry.

svg-to-component-loader

NPM version NPM downloads CircleCI donate chat

Why?

By using this it means you may never need things like vue-bytesize-icons and vue-feather-icons, your SVG would just be transformed to React or Vue component on the fly by this loader. However you can still use the prebuilt library like vue-bytesize-icons if you don't want to mess with your webpack config.

Install

yarn add svg-to-component-loader --dev

Usage

Configure it in webpack config

// webpack.config.js
module.exports = {
  // ... other config
  module: {
    rules: [
      // For React.js
      {
        test: /\.react.svg$/,
        loader: 'svg-to-component-loader',
        options: {
          type: 'react'
        }
      },
      // For Vue.js
      {
        test: /\.vue.svg$/,
        loader: 'svg-to-component-loader',
        options: {
          type: 'vue'
        }
      }
    ]
  }
}

Then simply import SVG in your app like this:

import UserIcon from './path/to/user.react.svg'

const App = () => (
  <div>
    <UserIcon className="custom-class" />
  </div>
)

Or simply use inline loader options:

import UserIcon from '!svg-to-component-loader?type=react!./path/to/user.react.svg'

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

svg-to-component-loader © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily

Current Tags

  • 0.1.1                                ...           latest (3 years ago)

2 Versions

  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 2
This Month 2
Last Day 2
Last Week 0
Last Month 2
Dependencies (2)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |