3.0.3 • Published 5 years ago

react-svg-loader v3.0.3

Weekly downloads
150,957
License
MIT
Repository
github
Last release
5 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-2616@3dverse/design-systembinary-common-icons@axa-ch/pod-uadmin@catapult-tech/cp-design-system-build@composition/composerconcilcalendar@descarteslabs/cycle-widgets@deriv/p2pc3dc-data-model-navigatorbooking_calendar@cargobr/poseidonolymppui-react-iconographypui-react-svgreact-fancy-visa-cardreact-fancy-scriptsreact-event-listreact-flexi-image-gridreact-flight-instrumentsreact-guide-tourreact-multiple-tagspermission-manager-test4permission-manager-test5ui-sdk-bahuiuxcliwebpack-config-cathx-scriptstrinny-londonskodel-react-scriptsskypager-frameworksally-website-widgetreact-vibesrivigo-ui-commonsrivigo-ui-commonsaringcentral-widgetringcentral-widgetsrelementsreact-alert-in4noreact-announcement-tickerreact-app-rewire-react-svg-loaderreact-application-corereact-svg-loader-clicm-page-buildercm-page-builder-test@copart/g2-ops-server@commutatus/cm-page-buildercoke-buildcoke-buildercoke-rebucycle-widgetsdata-model-navigatorcude-cms@aranja/react-scripts@anynines/design-system@eriksdigital/atomic-uiappirio-tech-react-components-challenge-specifydharma-loan-framedm-react-webpack@e_labs/generic-componentsbatpackchramework@databyss-org/uicreate-react-paradrop@dhruv-m-patel/web-app@jhanlu/react-sortable-table@makeen.io/material-ui-kitfsccat@lucaapp/design-library@moovly/moovly-scripts@moonwalker/jetpack@polymeshdev/ui@polymathnetwork/polymesh-ui@postshift/core@re-do/bundle@ramenjs/core@react-cli-ui/cli-ui@thesaurusds/components@sa-frontend/bundling@rocket-scripts/webpack@sanch941/configs-webpack@sourceteam/react-boilerplatekeycatlupus-react-maplou-do-vue@ringcentral-integration/widgets@vinuderiv/p2pelektra-iconose-labs_generic-componentsehdev-configer-normalehdev-configer-spaehdev-configs
3.0.4-alpha.3

5 years ago

3.0.4-alpha.2

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.2-alpha.2

5 years ago

3.0.2-alpha.1

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.1.1-alpha.36

5 years ago

2.1.0

6 years ago

2.0.0

6 years ago

2.0.0-alpha.4

6 years ago

2.0.0-alpha.3

7 years ago

2.0.0-alpha.2

7 years ago

2.0.0-alpha.1

7 years ago

2.0.0-alpha.0

7 years ago

1.1.1

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

1.0.0-3

8 years ago

1.0.0-2

8 years ago

1.0.0-1

8 years ago

1.0.0-0

8 years ago

0.1.0

8 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.3

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago

0.0.0

9 years ago