图片的格式有很多，前端经常使用的有以下类型:jpg,jpeg,png,gif,svg,这篇文章将简单svg的情况，以及项目中如何使用和配置svg图标
目录
什么是svg图标
SVG图标的优缺点
优点
缺点
svg前端使用场景
SVG在代码中的使用
简单使用创建svg
作为图标引入项目
img格式引入
项目配置使用 - vite-plugin-svg-icons
使用步骤
安装
配置
什么是svg图标
svg图标是基于XML的矢量图描述语言，它是一个可缩放的矢量图形(缩放质量不会有所损失)，可以通过css或者js进行操作
SVG图标的优缺点
优点
- 无损压缩：svg图像可以无限制缩放，不会失去图像的质量
- 可编辑：svg图像可以通过脚本进行交互和动画处理,被非常多的工具读取和修改（比如记事本），支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果，易于修改和编辑
- 可被搜索：svg的文本和图像分离，导致svg图像可可被搜索，索引和编辑
- 兼容性好：svg目前已经被大多数主流现代浏览器支持
缺点
- 复杂度高: svg图像的处理比较复杂，导致文件大小变大，加载时间会比较长
svg前端使用场景
- 图标图形：svg虽然复杂度高，但是如果是简单的图标使用，svg图标的文件还是比较小的，且因为其缩放无损特性，在不同设备和分辨率的展示效果会更加清晰
- 动画效果：svg支持通过css和js添加动画效果
- 交互式图形：canvas的绘制是不支持js事件的，但是svg可以实现交互式图形
- TailwindCSS：TailwindCSS是目前快速写css的一个插件，目前的流行趋势可以TailwindCSS+svg使用
SVG在代码中的使用
简单使用创建svg
svg具体如果画图是一个复杂的过程，这里只是简单写个代码画一个svg图
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
</svg>作为图标引入项目
img格式引入
直接利用img标签，引入图标地址
<img src="./assets/icons/copyright.svg"/>img引入svg对于修改颜色非常不方便，如果需要修改 - 要用到CSS3滤镜filter中的drop-shadow
img {
drop-shadow(black 80px 0)
}项目配置使用 - vite-plugin-svg-icons
官网
https://github.com/digitalacorn/vite-plugin-svg-icons/blob/main/README.zh_CN.md
注意，使用这个插件的node和vite的版本号
node version: >=12.0.0
vite version: >=2.0.0官网中的接受很详细了，但是这里按照vue项目，也会进行配置一下
使用步骤
安装
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D配置
- vite.config.ts 中的配置插件，如下
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 引入svg的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 将来的项目的图标路径，放src/assets/icons下
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// symbolId的格式 使用时一一对应
symbolId: 'icon-[dir]-[name]',
}),
]
});
- 入口文件导入
import 'virtual:svg-icons-register'
引入之后，可以在代码中查看svg是否引入成功
- 简单单个使用
<svg :style="{width: '16px', height: '16px'}">
<!-- 具体图标使用 name表示了文件夹对应的名称-->
<use xlink:href="#icon-copyright" fill="red"></use>
</svg>对于多个图标，当然要封装组件使用，并进行全局注册
组件简单封装
创建组件- src/components/svgIcon/index.vue
<template>
<div>
<svg :style="{ width: width, height: height }">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</div>
</template>
<script setup lang="ts">
defineProps({
//xlink:href属性值的前缀
prefix: {
type: String,
default: '#icon-'
},
//svg矢量图的名字
name: String,
//svg图标的颜色
color: {
type: String,
default: ""
},
//svg宽度
width: {
type: String,
default: '16px'
},
//svg高度
height: {
type: String,
default: '16px'
}
})
</script>
<style scoped></style>全局注册组件
创建index.ts在src/components
import SvgIcon from '@/components/svgIcon/index.vue'
import type { App, Component } from 'vue';
const components: {[name: string ] : Component} = {SvgIcon}
// 全局插件注册
export default {
install(app: App) {
Object.keys(components).forEach((key: string) => {
app.component(key, components[key]);
})
}
}在入口文件引入，注册
import gloablComponent from './components/index';
app.use(gloablComponent);使用
<SvgIcon name="copyright" color="red"></SvgIcon>到此就结束了，码字不易，简单点个👍🏻吧
