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

1// use npm
2npm install --save-dev auto-svg-component-generator
3
4// use yarn
5yarn 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

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

2. Type generation for SVG component names

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

Usage

webpack (nextjs, cra)

next.config.js

1const { WebpackSvgComponentPlugin } = require('auto-svg-component-generator');
2
3/** @type {import('next').NextConfig} */
4module.exports = {
5  webpack: (config) => {
6    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
7    fileLoaderRule.exclude = /\.svg$/;
8
9    // svgr configuration
10    config.module.rules.push({
11      loader: '@svgr/webpack',
12      options: {
13        prettier: false,
14        svgo: true,
15        svgoConfig: {
16          plugins: [
17            {
18              name: 'removeViewBox',
19              active: false
20            }
21          ]
22        },
23        titleProp: true
24      },
25      test: /\.svg$/
26    });
27
28    config.plugins.push(new WebpackSvgComponentPlugin({
29      svgFileDir: './public/svgs',
30      useSvgr: true // Please set it to true when using svgr.
31    }))
32
33    return config;
34  }
35};

vite

vite.config.js

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react-swc'
3import { viteSvgComponentPlugin } from 'auto-svg-component-generator'
4
5export default defineConfig({
6  plugins: [
7    react(), 
8    viteSvgComponentPlugin({
9      svgFileDir: 'src/assets/svgs', 
10      typescript: true
11    })],
12})

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)

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react-swc'
3import { viteSvgComponentPlugin } from 'auto-svg-component-generator'
4
5export default defineConfig({
6  plugins: [
7    react(), 
8    viteSvgComponentPlugin({
9      svgFileDir: 'src/assets/svgs',
10      title: true,
11      description: true,
12      svgo: {
13        plugins: [
14            { 
15                name: 'removeViewBox', 
16                active: false 
17            }
18        ]
19      }
20    })],
21})

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.