项目中的svg图标的封装与使用

1.安装

npm install vite-plugin-svg-icons -D

2.在vite.config.ts中配置

**所有的svg图标都必须放在assets/icons

// 引入svg
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

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

3.在入口文件引入

// svg插件需要配置代码
import 'virtual:svg-icons-register'

4.使用

在阿里巴巴图标生成的svg图标放在assets/icons下

<!-- svg:图标外层容器节点，内部需要use标签结合使用 -->
<svg>
    <!-- xlink：href 执行哪一个图标，属性值必须 #icon-图标名字 -->
    <!-- use标签使用fill属性设置图标颜色 -->
    <use xlink:href="#icon-phone" fill="yellow"></use>
 </svg>

封装一个svg组件

一：局部组件

<template>
  <svg :style="{ width, height }">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>
<script setup lang="ts">

defineProps({
  // xlink:href属性前缀
  prefix: {
    type: String,
    default: '#icon-',
  },
  // 图标名字
  name: String,
  // 图标颜色
  color: {
    type: String,
    default: '',
  },
  // 图标宽度
  width: {
    type: String,
    default: '16px',
  },
  // 图标高度
  height: {
    type: String,
    default: '16px',
  },
})
</script>
<script scoped lang="scss"></script>

引用

import SvgIcon from "@/components/SvgIcon/index.vue"
<svg-icon name="expand" color="pink" height="20px" width="20px"></svg-icon>

二、全局组件

1.在components文件夹下新建一个index.ts，将在所有的svg图标组件引入在index.ts中，这个文件载全体暴露出来。

// 引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'

// 全局对象
const allGloablComponent = { SvgIcon }
// 暴露插件对象
export default {
  install(app) {
    Object.keys(allGloablComponent).forEach((key) => {
      app.component(key, allGloablComponent[key])
    })
  },
}

2.在main.ts中设置全局组件

// 引入自定义插件对象，注册整个项目全局组件
import gloablComponent from '@/components'
// 安装自定义插件
app.use(gloablComponent)

进行以上操作之后，在项目的中可以直接使用组件就可以了，不需要引入

项目中的svg图标的封装与使用

猜你喜欢