Webpack loader to import SVG as React/Vue component
MIT License
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.
yarn add svg-to-component-loader --dev
// 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>
)
import UserIcon from '!svg-to-component-loader?type=react!./path/to/user.react.svg'
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
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