https://github.com/frenzzy/svg-to-jsx-loader

SVG to JSX loader module for webpack
https://github.com/frenzzy/svg-to-jsx-loader

jsx jsx-loader react svg svg-loader webpack webpack-loader

Last synced: 2 months ago
JSON representation

SVG to JSX loader module for webpack

• Host: GitHub
• URL: https://github.com/frenzzy/svg-to-jsx-loader
• Owner: frenzzy
• License: mit
• Created: 2015-12-04T21:48:59.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-28T12:15:26.000Z (over 7 years ago)
• Last Synced: 2024-05-31T15:29:04.740Z (7 months ago)
• Topics: jsx, jsx-loader, react, svg, svg-loader, webpack, webpack-loader
• Language: JavaScript
• Size: 41 KB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# svg-to-jsx-loader

[Webpack](https://webpack.js.org/) loader that allows to load SVG files as [stateless functional](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components) [React](http://facebook.github.io/react/) components with [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx).

[![NPM version](http://img.shields.io/npm/v/svg-to-jsx-loader.svg?style=flat-square)](https://www.npmjs.com/package/svg-to-jsx-loader)

[![NPM downloads](http://img.shields.io/npm/dm/svg-to-jsx-loader.svg?style=flat-square)](https://www.npmjs.com/package/svg-to-jsx-loader)

[![Build Status](http://img.shields.io/travis/frenzzy/svg-to-jsx-loader/master.svg?style=flat-square)](https://travis-ci.org/frenzzy/svg-to-jsx-loader)

[![Coverage Status](https://img.shields.io/coveralls/frenzzy/svg-to-jsx-loader.svg?style=flat-square)](https://coveralls.io/github/frenzzy/svg-to-jsx-loader)

[![Dependency Status](http://img.shields.io/david/frenzzy/svg-to-jsx-loader.svg?style=flat-square)](https://david-dm.org/frenzzy/svg-to-jsx-loader)

## Installation

Using [npm](https://www.npmjs.com/):

```shell

$ npm install svg-to-jsx-loader --save-dev

```

## Usage

Webpack documentation: [Using loaders](https://webpack.js.org/concepts/loaders/)

In your `webpack.config.js`, add the `svg-to-jsx-loader`, chained with the [`babel-loader`](https://babeljs.io/docs/setup/#webpack2):

```js

rules: [

  {

    test: /\.svg$/,

    loaders: [

      'babel-loader', // v5

      'svg-to-jsx-loader'

    ]

  }

]

```

Or you can find a working example in [test/webpack.config.js](https://github.com/frenzzy/svg-to-jsx-loader/blob/master/test/webpack.config.js) file:

```js

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

```svg

  

```

### Output example

```js

import React from 'react';

function ForwardIcon(props) {

  return (

    

      

    

  );

}

export default ForwardIcon;

```

## Inspiration

- [svg-jsx-loader](https://github.com/janjakubnanista/svg-jsx-loader)

- [react-svg-loader](https://github.com/boopathi/react-svg-loader)

- [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx)

## License

This source code is licensed under the MIT license found in the [LICENSE.txt](https://github.com/frenzzy/svg-to-jsx-loader/blob/master/LICENSE.txt) file.