vue中svg图标的使用与配置与全局组件

在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源

建议用pnpm

1、  安装依赖插件  

npm安装：npm install svg-sprite-loader --save-dev

pnpm安装：pnpm install vite-plugin-svg-icons -D

2、 在`vite.config.ts`中配置插件

import path from 'path'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({

  plugins: [

    vue(),

    createSvgIconsPlugin({

      // 需要自动导入的 svg 文件目录 (可自行修改)我的路径如下图所示

      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // Specify symbolId format

      // 执行icon name的格式 (可自行修改)

      symbolId: 'icon-[dir]-[name]',

    }),

  ],

})

3、  入口文件导入 main.ts

import 'virtual:svg-icons-register'

4、  页面使用

先创建文件夹

使用要写规定的语法 

<svg style="width:30px;height:30px">

    <use xlink:href="#icon-phone" fill="red"></use>

</svg>

注意：

【坑】vite-plugin-svg-icons报错：Cannot find package ‘fast-glob‘

下载模块就行

pnpm i fast-glob

5、  svg封装为组件

因为项目很多模块需要使用图标,因此把它封装为组件！！！

在src/components目录下创建一个SvgIcon组件:代码如下

<template>

    <!-- svg:图标外层容器节点,内部需要与use标签结合使用 -->

    <svg :style="{ width, height }">

        <!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 -->

        <!-- use标签fill属性可以设置图标的颜色 -->

        <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>

<style scoped></style>

什么地方使用就引入

import svgIcon from './components/SvgIcon/index.vue'

<svgIcon name="phone" color="yellow" width="50px" height="50px"></svgIcon>

全局组件

不用每次都引入组件，写一个全局组件，只需在main.ts中映引入即可。 

//引入自定义插件对象:注册整个项目全局组件

import gloalComponent from './components'

//安装自定义插件

const app=createApp(App)

app.use(gloalComponent)

创建组件文件Svgicon等，index.ts是配置组件的 

 

 在index.ts中配置全局的组件

//引入项目中全部的全局组件

import SvgIcon from './SvgIcon/index.vue'

// import Pagination from './Pagination/index.vue'

// import Category from './Category/index.vue'

//全局对象

const allGloablComponent: any = { SvgIcon, }

//对外暴露插件对象

export default {

  //务必叫做install方法

  install(app: any) {

    //注册项目全部的全局组件

    Object.keys(allGloablComponent).forEach((key) => {

      //注册为全局组件

      app.component(key, allGloablComponent[key])

    })

  },

}

使用： 直接写组件名传参就行。

<SvgIcon  name="phone" color="yellow" width="50px" height="50px"></SvgIcon>