前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vite项目当中的SVG图标的配置及图标全局组件的封装

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

作者头像
HelloWorldZ
发布2024-05-24 14:11:05
600
发布2024-05-24 14:11:05
举报
文章被收录于专栏:前端开发前端开发

为什么要使用 SVG 图标?

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

如何使用?

  1. 安装 SVG 依赖插件
代码语言:javascript
复制
pnpm install vite-plugin-svg-icons -D
  1. 在 vite.config.ts 中配置插件
代码语言:javascript
复制
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
    }
  }
})
  1. main.ts 中导入
代码语言:javascript
复制
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 就可以了

代码语言:javascript
复制
<template>
  <div>我是App根组件</div>
 <--是特定的语法-->
 
  <svg>
    <use xlink:href="#icon-phone"></use>
  </svg>
</template>
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

component / SvgIcon / index.vue

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

代码语言:javascript
复制
<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

代码语言:javascript
复制
/*
 * 注册整个项目的全局组件
*/
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 中去安装一下:

代码语言:javascript
复制
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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档