3.0.3 • Published 6 years ago

react-svg-loader v3.0.3

Weekly downloads
150,957
License
MIT
Repository
github
Last release
6 years ago

react-svg-loader

Install

npm i react-svg-loader --save-dev

or

yarn add react-svg-loader --dev

Usage

// 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
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>

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 + babel-preset-env to compile it down to your target.

// In your webpack config
{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

SVGO options

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        svgo: {
          plugins: [
            { removeTitle: false }
          ],
          floatPrecision: 2
        }
      }
    }
  ]
}

Internals

Assumptions and Other gotchas

  • Root element is always <svg>
  • SVG is optimized using SVGO

LICENSE

MIT

next-contour@thesaurus/componentsseamlessdocs-client@rdementev/sql-builder-clientalinesno-do-vuehima-weather@commutatus/cm-page-builder-testmaterial-iw@everything-registry/sub-chunk-2616person-management-app@composition/composer@commutatus/cm-page-builder@copart/g2-ops-server@databyss-org/ui@descarteslabs/cycle-widgets@re-do/bundle@react-cli-ui/cli-uiiot-handler-headsupiot-service-handler-headsupkeycat@3dverse/design-systemuiuxcliui-sdk-bahthx-scriptstrinny-london@anynines/design-system@aranja/react-scripts@axa-ch/pod-uadmin@cargobr/poseidon@catapult-tech/cp-design-system-build@deriv/p2p@dhruv-m-patel/web-appwebpack-config-ca@e_labs/generic-components@lucaapp/design-library@makeen.io/material-ui-kit@eriksdigital/atomic-ui@jhanlu/react-sortable-table@moonwalker/jetpack@moovly/moovly-scripts@postshift/core@sa-frontend/bundling@ramenjs/core@sanch941/configs-webpack@polymathnetwork/polymesh-ui@polymeshdev/ui@rocket-scripts/webpackmultreeselectmitan-react-releasemodified-react-scriptsmodel-explorermm-scriptsnatalia-uiolympreact-multiple-tagsreact-announcement-tickerreact-alert-in4noreact-application-corereact-app-rewire-react-svg-loaderreact-flight-instrumentsreact-flexi-image-gridsally-website-widgetpui-react-svgrelementsreact-guide-tourreact-event-listreact-fancy-scriptsreact-fancy-visa-cardneutrino-middleware-reactsvgnext-component-imagespermission-manager-test5permission-manager-test4ringcentral-widgetpui-react-iconographyrivigo-ui-commonsrivigo-ui-commonsaringcentral-widgetsreact-vibesskodel-react-scriptsreact-svg-loader-cliskypager-frameworklupus-react-maplou-do-vue@wisersolutions/bundle-js@thesaurusds/components@vinuderiv/p2pabe-frontend-smb3abe-frontend-smb4abe-frontend-smb5abe-frontend-2abe-frontend-smbappirio-tech-react-components-challenge-specifyc3dc-data-model-navigatorchrameworkcoke-buildcoke-buildercoke-rebucm-page-buildercm-page-builder-testconcilcalendar
3.0.4-alpha.3

6 years ago

3.0.4-alpha.2

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.2-alpha.2

6 years ago

3.0.2-alpha.1

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.1.1-alpha.36

7 years ago

2.1.0

8 years ago

2.0.0

8 years ago

2.0.0-alpha.4

8 years ago

2.0.0-alpha.3

8 years ago

2.0.0-alpha.2

8 years ago

2.0.0-alpha.1

9 years ago

2.0.0-alpha.0

9 years ago

1.1.1

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

1.0.0-3

9 years ago

1.0.0-2

9 years ago

1.0.0-1

9 years ago

1.0.0-0

9 years ago

0.1.0

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago