Vite项目当中的SVG图标的配置及图标全局组件的封装

HelloWorldZ

发布于 2024-05-24 14:11:05

830

发布于 2024-05-24 14:11:05

文章被收录于专栏：前端开发前端开发

为什么要使用 SVG 图标？

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

如何使用？

安装 SVG 依赖插件

pnpm install vite-plugin-svg-icons -D

在 vite.config.ts 中配置插件

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 引入 svg 图标所需要的插件
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 图标的存放目录
      symbolId: 'icon-[dir]-[name]'
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
    }
  }
})

main.ts 中导入

import { createApp } from 'vue'
import App from '@/App.vue'
import 'virtual:svg-icons-register' // svg 配置

console.log(import.meta.env)
createApp(App).mount('#app')

注意，如果在重新启动项目的时候有如下报错：

手动进行安装

测试使用

svg:图标外层容器节点,内部雷要与use标签结合使用

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

use标签fill 属性性可以设置图标的颜色（如何设置失败，检查你复制的这个 svg 图标代码中是否有这个 fill 属性，如果有就将其移除掉，就可以使用了）

如果需要调整图标的大小，那么就需要在 svg 标签上添加 style 就可以了

<template>
  <div>我是App根组件</div>
 <--是特定的语法-->
 
  <svg>
    <use xlink:href="#icon-phone"></use>
  </svg>
</template>

可以看到，在项目中可以使用 SVG 图标了，但是有一点不好的就是这样用起来有点麻烦，这个时候我们就可以进行ICON图标组件的封装了，并将其注册为一个全局的组件。

component / SvgIcon / index.vue

这里是组件的一个简单封装：

<template>
  <svg :style="styleObject">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  prefix: {
    type: String,
    default: '#icon-'
  },
  name: String,
  color: String,
  width: {
    type: String,
    default: '16px'
  },
  height: {
    type: String,
    default: '16px'
  }
})

const styleObject = {
  width: props.width,
  height: props.height
}
</script>

<style scoped>

</style>

对于类似这样在项目中会频繁使用到的基础组件，是不是可以将其注册为全局组件呢？

此时我们可以写一个自动注册的插件

component / index.ts

/*
 * 注册整个项目的全局组件
*/
import SvgIcon from './SvgIcon/index.vue'
import { App } from 'vue'
const allGlobalComponent: any = { SvgIcon }
console.log(allGlobalComponent)
export default {
    // 默认会注入 app
    install(app: App) {
        // 注册全部的全局组件
        Object.keys(allGlobalComponent).forEach(key => {
            // 注册为全局组件
            console.log(key)
            app.component(key, allGlobalComponent[key])
        })
    }
}

如上是采用导入组件的方法，其实也可以去遍历需要注册成全局组件的文件夹里面的组件文件进行注册。

最后当插件写好后，便需要在 main.ts 中去安装一下:

import { createApp } from 'vue'
import App from '@/App.vue'

import 'virtual:svg-icons-register' // svg 配置
import globalComponent from '@/components/index.ts' // 引入自定义插件对象：注册整个项目的全局组件
import '@/styles/index.scss' // 引入全局样式

const app = createApp(App)

app.use(globalComponent) // 安装自定义插件
app.mount('#app')

这样就制作好了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-05-19，如有侵权请联系 cloudcommunity@tencent.com 删除

插件