svg图标的使用_IT分享知识网

无损压缩：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>

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

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/117848.html

svg图标的使用

什么是svg图标

SVG图标的优缺点

优点

缺点