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: /\.(js|svg)$/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

import React from 'react';

function ForwardIcon(props) {
  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>
  );
}

export default ForwardIcon;

Inspiration

• svg-jsx-loader
• react-svg-loader
• svg-to-jsx

License

This source code is licensed under the MIT license found in the LICENSE.txt file.