svg封装使用

1、安装库

    "vite-plugin-svg-icons": "^2.0.1"

2、配置svg

vite.config中配置：

主要是配置createSvgIconsPlugin

import react from '@vitejs/plugin-react'
import viteESLintPlugin from 'vite-plugin-eslint'
import { loadEnv } from 'vite'
import { wrapperEnv } from './scripts/utils'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock'
import { resolve } from 'path'
import type { ConfigEnv, UserConfig } from 'vite'

export default ({command,mode}: ConfigEnv): UserConfig =>{
  // 获取项目根目录的绝对路径
  const root = process.cwd()
  // 判断当前命令是否为构建命令
  const isBuild = command === 'build'
  // 根据模式加载环境变量
  const env = loadEnv(mode, root)
  const viteEnv: any = wrapperEnv(env)
  const { VITE_PORT, VITE_DROP_CONSOLE } = viteEnv
  return {
    // 路径配置--重写
    resolve: {
      alias: {
        '@': resolve(__dirname, './src')
      }
    },
    plugins: [
      react(),
      createSvgIconsPlugin({
        iconDirs: [resolve(process.cwd(), 'src/assets/icons')],//存放的路径
        symbolId: 'icon-[dir]-[name]'//命名方式
      }),
    ],

  }
}

 3、创建svg文件

存放目录要跟vite配置一致

4、main文件导入

这是一个容易忽略的点，不导入svg不会展示

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "antd/dist/reset.css";
import store from "./store";
import { Provider } from "react-redux";
import 'virtual:svg-icons-register'  //导入配置

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
);

 5、封装svg组件

在componetns添加svg组件

index.module.less:

.svg-icon {
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

index.tsx:

import type { SvgIconProp } from './types'
import styles from './index.module.less'

export default function SvgIcon({ name, prefix = 'icon', size = 16, style }: SvgIconProp) {
  const symbolId = `#${prefix}-${name}`
  const iconStyle = {
    width: `${size}px`,
    height: `${size}px`,
    ...style
  }

  return (
    <svg className={styles['svg-icon']} style={iconStyle} aria-hidden='true'>
      <use href={symbolId} />
    </svg>
  )
}

type.ts

export interface SvgIconProp {
  name: string
  prefix?: string
  size?: number
  style?: React.CSSProperties
}

6、使用svg

随便在使用的组件中导入svg组件，切记传入的name要和创建的svg文件命名一致，不然也会无法展示，传入svg名、大小、颜色即可。

注意事项：

1、创建目录切记要和vite配置一致

2、main要导入配置 ：import 'virtual:svg-icons-register'

3、传递的svg组件的name的时候要和创建的svg文件一致