AutoSvgComponentGenerator

AutoSvgComponentGenerator is a generator that automatically converts .svg files into React components. AutoSvgComponentGenerator automatically generates index.tsx or index.jsx in React component format when .svg files are added, moved, modified or deleted.

Installation

// use npm
npm install --save-dev auto-svg-component-generator

// use yarn
yarn add --D auto-svg-component-generator

Naming Convention

SVG components are generated based on the svg file name, and the naming convention for generating SVG components is as follows:

ico-react.svg => SvgIcoReact

Auto-generated Types

SvgComponentGenerator automatically generates not only components but also useful types whenever .svg files are added, moved, deleted, or modified.

1. Type generation for file names

export type StaticSvgIconName = 'ico-close' | 'ico-search' | 'next' | 'react' | 'vercel';

2. Type generation for SVG component names

export type SvgComponentName = 'SvgIcoClose' | 'SvgIcoSearch' | 'SvgNext' | 'SvgReact' | 'SvgVercel';

Usage

webpack (nextjs, cra)

next.config.js

const { WebpackSvgComponentPlugin } = require('auto-svg-component-generator');

/** @type {import('next').NextConfig} */
module.exports = {
  webpack: (config) => {
    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;

    // svgr configuration
    config.module.rules.push({
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'removeViewBox',
              active: false
            }
          ]
        },
        titleProp: true
      },
      test: /\.svg$/
    });

    config.plugins.push(new WebpackSvgComponentPlugin({
      svgFileDir: './public/svgs',
      useSvgr: true // Please set it to true when using svgr.
    }))

    return config;
  }
};

vite

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { viteSvgComponentPlugin } from 'auto-svg-component-generator'

export default defineConfig({
  plugins: [
    react(), 
    viteSvgComponentPlugin({
      svgFileDir: 'src/assets/svgs', 
      typescript: true
    })],
})

AutoSvgComponentGenerator Options

| Option | Type | Default | Description | |----------------|------------------------|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | svgFileDir | string | - (Required) | Directory path where project's .svg files are stored | | outputDir | string | svgFileDir | Output directory path where converted components will be stored. Default is svgFileDir | | typescript | boolean | false | Sets whether to use TypeScript. If true, generates index.tsx file and types/index.d.ts. If false, generates index.jsx | | useSvgr | boolean | false | Sets whether to use svgr. If true, generates components using svgr. If false, doesn't use svgr | | title | boolean | false | Sets whether to show the title tag of svg files. If true, shows the title tag. If false, doesn't show the title tag (ignored when useSvgr: true) | | description | boolean | false | Sets whether to show the desc tag of svg files. If true, shows the desc tag. If false, doesn't show the desc tag (ignored when useSvgr: true) | | svgo | Omit<SvgConfig, 'path'> | undefined | Sets svgo options when useSvgr is false (ignored when useSvgr: true) |

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { viteSvgComponentPlugin } from 'auto-svg-component-generator'

export default defineConfig({
  plugins: [
    react(), 
    viteSvgComponentPlugin({
      svgFileDir: 'src/assets/svgs',
      title: true,
      description: true,
      svgo: {
        plugins: [
            { 
                name: 'removeViewBox', 
                active: false 
            }
        ]
      }
    })],
})

Cautions!

• For vite, version 4.0.0 or higher is required.
• For next.js, you must use webpack in next.config.js. (turbopack is not supported.)
• When using the useSvgr option, you must install svgr and apply it to webpack before use.
• It is recommended to use it with svgr. (svgr is relatively stable.)
• When useSvgr is true, the svgo, title, and description options are ignored.