在开发项目时,确实经常使用 SVG(Scalable Vector Graphics)矢量图,因为它们具有许多优点。以下是使用 SVG 的主要好处:
-
可伸缩性:SVG 图形可以在任何尺寸下保持高质量,不会像位图图像那样失真。这意味着无论屏幕大小或分辨率如何变化,SVG 图形都能保持清晰度。
-
小文件大小:相比于传统的位图格式(如 PNG 或 JPEG),SVG 文件通常较小,因此在网页上加载更快,节省带宽。
-
可编辑性:SVG 图形是基于 XML 的,所以可以使用文本编辑器进行编辑,也可以使用 CSS 或 JavaScript 动态改变颜色、大小和样式。
-
SEO 友好:搜索引擎更容易索引 SVG 图片,因为它们是文本格式。
-
可交互性:SVG 支持动画和交互式图形,使设计更具吸引力。
-
无障碍性:SVG 图形可以为视觉障碍用户提供更好的体验,因为它们可以与辅助技术一起工作
安装SVG依赖插件
npm install vite-plugin-svg-icons
在 vite.config.ts 中配置插件
// 引入svg要用到的插件
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [fileURLToPath(new URL('./src/assets/icons', import.meta.url))],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
],
}}
入口文件导入
import 'virtual:svg-icons-register'
svg封装
创建一个 src\components\SvgIcon\index.vue 的文件
<template>
<!-- 测试svg图标使用 -->
<!-- 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({
// 图标前缀
prefix: {
type: String,
default: '#icon-'
},
// 提供图标的名字
name: String,
// 图标颜色
color: String,
// 图标大小
width: {
type: String,
default: '16px'
},
height: {
type: String,
default: '16px'
}
})
</script>
<style scoped></style>
使用方式
<template>
<div>
<h1>测试组件</h1>
<svg-icon name="delete" color="pink"></svg-icon>
</div>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>
<style scoped>
</style>
效果如下:
svg组件注册为全局组件
在 main.ts 中引入
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// 引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 配置element-plus中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus, {
locale: zhCn,
})
// svg插件配置需要代码
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'
app.component('SvgIcon', SvgIcon)
// 将应用挂载
app.mount('#app')