Network Pipe Manufacturer

    @hitbit/expo-svg-transformer

    0.0.7 • Public • Published
    expo install react-native-svg
    yarn add --dev @hitbit/expo-svg-transformer @expo/webpack-config

    app.json

    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["js", "jsx", "ts", "tsx", "svg"]
    }

    metro.config.js

    const { getDefaultConfig } = require('metro-config');
    
    module.exports = (async () => {
      const { resolver: defaultResolver } = await getDefaultConfig();
      const { sourceExts, assetExts } = defaultResolver;
    
      return {
        transformer: {
          babelTransformerPath: require.resolve('@hitbit/expo-svg-transformer'),
        },
        resolver: {
          assetExts: assetExts.filter(ext => ext !== 'svg'),
          sourceExts: [...sourceExts, 'svg'],
        },
      };
    })();

    webpack.config.js

    const createExpoWebpackConfigAsync = require('@expo/webpack-config');
    
    const svgRule = {
      test: /\.svg$/,
      exclude: /node_modules/,
      use: [
        'babel-loader',
        '@hitbit/expo-svg-transformer',
      ],
    };
    
    module.exports = async (env, argv) => {
      const expoWebpackConfig = await createExpoWebpackConfigAsync(env, argv);
    
      expoWebpackConfig.module.rules[1].oneOf.unshift(svgRule);
    
      return expoWebpackConfig;
    };

    App.js

    import React from 'react';
    import { View } from 'react-native';
    import Logo from './assets/Logo.svg';
    
    export default function App() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Logo height={50} width={50} />
        </View>
      );
    }

    Install

    npm i @hitbit/expo-svg-transformer

    DownloadsWeekly Downloads

    1

    Version

    0.0.7

    License

    GPL-3.0

    Unpacked Size

    3 kB

    Total Files

    3

    Last publish

    Collaborators

    • emiliano.bovetti
    • matteocarpi