# react-svg-loader ## Install ```sh npm i react-svg-loader --save-dev ``` or ```sh yarn add react-svg-loader --dev ``` ## Usage ```js // without webpack loader config import Image1 from 'react-svg-loader!./image1.svg'; // or if you're passing all .svg files via react-svg-loader, import Image2 from './image1.svg'; // and use it like any other React Component ``` ### Loader output By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with [babel-loader](https://github.com/babel/babel-loader) + [babel-preset-env](https://github.com/babel/babel-preset-env) to compile it down to your target. ```js // In your webpack config { test: /\.svg$/, use: [ { loader: "babel-loader" }, { loader: "react-svg-loader", options: { jsx: true // true outputs JSX tags } } ] } ``` ### SVGO options ```js { test: /\.svg$/, use: [ "babel-loader", { loader: "react-svg-loader", options: { svgo: { plugins: [ { removeTitle: false } ], floatPrecision: 2 } } } ] } ``` ## Internals

Input SVG

↓

SVG Optimize using SVGO

↓

Babel Transform with preset=react and plugin=svgToComponent

## Assumptions and Other gotchas + Root element is always `

套件	下載數	Stars	大小	Issues	發布時間	許可

react-svg-loader	123,561	639	-	50	6 年前	MIT