React封装svg图标组件（vite+ts）

最新推荐文章于 2024-07-18 11:48:33 发布

奥巴迪克

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量1.2k

点赞数 12

文章标签： react.js 前端 typescript

本文链接：https://blog.csdn.net/m0_67156290/article/details/136061914

版权

本文介绍了如何在Vite项目中安装并配置vite-plugin-svg-icons插件，以引入、封装SVG图标并创建可复用组件。步骤包括配置vite.config.ts、引入插件和在组件中使用SVG图标。

摘要由CSDN通过智能技术生成

1.下载插件 vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D

2.配置vite插件

vite.config.ts文件配置vite-plugin-svg-icons插件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'    // 封装svg图标

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
    //......
  ],

    //......
})

3.引入插件

main.tsx文件引入vite-plugin-svg-icons插件

import 'virtual:svg-icons-register'

4.封装组件

新建SvgIcon.tsx文件封装组件

import { useMemo } from "react"

interface propsInterface {
  name:string
  size?:string
  color?:string
  profix?:string
}

export default function SvgIcon(props:propsInterface) {
  const size = props.size ?? "36px"
  const color = props.color ?? ""
  const profix = props.profix ?? "icon"

  const iconName = useMemo<string>(()=>{
    return `#${profix}-${props.name}`
  },[profix,props.name])

  return (
    <svg style={{height:size,width:size}}>
      <use href={iconName} fill={color} />
    </svg>
  )
}

5.组件的使用

将svg文件存放在/src/assets/icons文件夹中，使用时传递文件名称作为name参数调用SvgIcon组件。size参数指定图标大小，color参数指定图标颜色。

import SvgIcon from "@/components/SvgIcon/SvgIcon"

export default function App() {
  return (
    <div>
      <SvgIcon name="user" size="20"/>
    </div>
  )
}