codebandits / react-app-rewire-svg-react-loader

Archive Notice

This project is archived. Create React App v2 introduced support for SVG Components. We recommend using the native support for SVG Components instead of this project.

react-app-rewire-svg-react-loader

Add SVG React Loader to your create-react-app via react-app-rewired.

Installation

This package is not yet published to the npm registry. Install from GitHub:

yarn add --dev codebandits/react-app-rewire-svg-react-loader

OR

npm install --save-dev codebandits/react-app-rewire-svg-react-loader

Usage

Import your *.svg files and use them as React components.

Example

In your react-app-rewired configuration:

/* config-overrides.js */

const rewireSvgReactLoader = require('react-app-rewire-svg-react-loader');

module.exports = function override(config, env) {
    // ...
    config = rewireSvgReactLoader(config, env);
    // ...
    return config;
}

In your React application:

<!-- src/triangle.svg -->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <polygon points="0,93.3 93.3,93.3 50,6.7"/>
</svg>

// src/App.js

import React from 'react';
import Triangle from './triangle.svg';

export default () => (
    <div>look, it's a triangle: <Triangle/></div>
)