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:
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.