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

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.

Changelog

[1.0.3] - 2025-01-22

• useSvgr 옵션값 상태에 따라 타입 동적으로 정해지도록 타입 정의
• svgo 옵션 전달 받도록 수정
• useSvgr 옵션 값에 따른 동적 타입 적용 안되는 버그 수정

[1.0.19-alpha] - 2025-01-22

• useSvgr 옵션 값에 따른 동적 타입 적용 안되는 버그 수정

[1.0.18-alpha] - 2025-01-22

• useSvgr 옵션값 상태에 따라 타입 동적으로 정해지도록 타입 정의
• svgo 옵션 전달 받도록 수정