svg图标的使用

图片的格式有很多，前端经常使用的有以下类型: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>

到此就结束了，码字不易，简单点个👍🏻吧