svg-to-jsx-loader
Webpack loader that allows to load SVG files as stateless functional React components with svg-to-jsx.
Installation
Using npm:
$ npm install svg-to-jsx-loader --save-dev
Usage
Webpack documentation: Using loaders
In your webpack.config.js
, add the svg-to-jsx-loader
, chained with the babel-loader
:
rules: test: /\.svg$/ loaders: 'babel-loader' // v5 'svg-to-jsx-loader'
Or you can find a working example in test/webpack.config.js file:
rules: test: /\.$/i loader: 'babel-loader' // v6 or later exclude: /node_modules/ query: presets: 'react' test: /\.svg$/i loader: 'svg-to-jsx-loader'
Input example
<?xml version="1.0" encoding="iso-8859-1"?><!-- 001-forward-icon.svg --><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" width="24" height="24"> <path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/></svg>
Output example
; { return <svg height="24" width="24" version="1.1" viewBox="0 0 24 24" ...props> <path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/> </svg> ;} ;
Inspiration
License
This source code is licensed under the MIT license found in the LICENSE.txt file.