SVG Transformer Webpack Plugin

Installation

yarn add @toba/svg-transformer --dev

Configuration

Web

Webpack

import { HtmlSvgPlugin } from '@toba/html-webpack-inline-svg';

export = {
  test: /.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        native: true,
      },
    },
  ],
}

React Native

Based on react-native-svg-transformer

Make sure that you have installed and linked react-native-svg library:

• https://github.com/react-native-community/react-native-svg#installation

metro.config.js

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
   const {
      resolver: { sourceExts, assetExts }
   } = await getDefaultConfig();
   return {
      // https://facebook.github.io/metro/docs/en/configuration#babeltransformerpath
      transformer: {
         babelTransformerPath: require.resolve('@toba/svg-transformer')
      },
      resolver: {
         assetExts: assetExts.filter(ext => ext !== 'svg'),
         sourceExts: [...sourceExts, 'svg']
      }
   };
})();

or rn-cli.config.js

// https://github.com/facebook/metro/issues/176
module.exports = {
   transformModulePath: require.resolve('@toba/svg-transformer'),
   resolver: {
      sourceExts: ['svg']
   }
};

Usage

Import your .svg file inside a React component:

import LogoSVG from './logo.svg';

You can then use your image as a component:

<LogoSVG width={120} height={40} />

License

Copyright © 2019 Jason Abbott

This software is licensed under the MIT license. See the LICENSE file accompanying this software for terms of use.