svg-to-component-loader

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