@supl.biz_tech/import-svg v1.2.1

import-svg

This package aims to provide:

1. require() hook for importing SVGs as React components in Node.js environment
2. Webpack loader for the same goal (+ optimization)

Installation

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

Usage

In Node.js, as soon as possible (NEVER USE THIS FOR PRODUCTION):

require('@supl.biz_tech/import-svg').registerRequireHook()

In your webpack config:

{
  test: /\.svg$/,
  use: [
    // minify JS output here...
    {
      loader: require('@supl.biz_tech/import-svg').loader,
      options: { optimize: true },
    },
  ],
}

In your Rollup config:

// ...
const { importSvg } = require('@supl.biz_tech/import-svg/rollup');
// ...
export default {
  // ...
  plugins: [
    // ...
    importSvg({ optimize: true }),
  ],
};

In your code:

import MyIcon from './myIcon.svg'

const iconElem = <MyIcon anyPropName="anyValue" />

TS support

Put this in a .d.ts file somewhere where TSC can find it.

declare module '*.svg' {
    const Component: React.FunctionComponent<{ [prop: string]: unknown }>
    export = Component
}

SVG processing needed for React compatibility

• remove prop namespaces
• camelcase all props
• ???