@supl.biz_tech/svg-components v1.0.1

svg-components

Successor of import-svg

Installation

yarn add --dev @supl.biz_tech/svg-components

Node (DEV ONLY)

require('@supl.biz_tech/svg-components').registerHook();

Webpack (DEV ONLY)

{
  test: /\.svg$/,
  use: [
    require('@supl.biz_tech/svg-components').loader,
  ],
},

Rollup (PROD)

plugins: [
  require('@supl.biz_tech/svg-components').plugin(),
],

Please note that the generated component code is not ES5, hence you may need to transpile it first before bundling. If you're using rollup-plugin-babel, just add .svg to extensions.

TypeScript

Put this in a .d.ts file somewhere where the compiler can find it:

declare module '*.svg' {
  const Component: React.ComponentType<JSX.IntrinsicElements['svg']>;
  export = Component;
}

Usage

import Icon from './icon.svg';

const iconElement = <Icon anySvgProp="value" />;