🗒️前端项目优雅使用svg
2022-11-27
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

在前端开发中,大家都接触到设计图。Figma或者蓝图,在线设计或者看图的网站。UI设计又很喜欢那种花里胡哨的图标,很难找。神奇的是你可以把它们保存为SVG图标。但是SVG的引入又是一大串长长的代码,更麻烦的是有些图标悬浮上去是要改变颜色的。这里我找到了一种让SVG方便引入的方法,而且能像字体文件一样,简单的改变颜色和大小。

SVG Sprite

如果你没听过SVG Sprite,也许听过雪碧图(CSS Sprite),如下图所示。雪碧图是为了减少网络请求次数,将许多小图标整合到一张图片上,然后通过CSS定位技术显示特定位置的图标。雪碧图在使用上存在一些弊端,目前已经很少使用了。
类似的SVG Sprite是通过<symbol><use>实现的。<symbol>元素可以把SVG图标定义成一个图形模板对象,<use>元素通过xlink:href属性引用symbol id展示图形。下面代码定义了三个<symbol>图形模板,此时图形并不会展示到页面上,通过<use>元素引用symbol id后才可展示图形。
通过上面示例代码可以看出:
  1. <use>元素可以跨<svg>元素引用<symbol>
  1. <use>可以重复引用<symbol>.
如果将项目中的SVG图标用<symbol>元素定义成图形模板,并将其组合成一个大的<svg>加载到页面中,如下图所示。那么我们可以在页面的任何位置,只需要一行代码就可以引用这个图标了。

webpack-vue上使用

src/components下建立一个SvgIcon组件

在src/assets/下建立一个icons文件夹,然后下面再建一个svg文件夹

这个SVG文件夹主要存放SVG图标。icons文件夹下再建一个index.js,它的功能是把组件注册到全局,方便使用:

main.js中引入

这一步就是把文件注册到全局上。
下面是最重要的一步:
主要是修改loader和一个去除SVG内部默认的full属性值。
本来载入和删除full对于大部分的项目够用了,但是难免遇到复杂的SVG,这个时候就不能去掉它的颜色了。所以对配置做了修改。新增了original文件夹存放不需要去除配色的文件了

修改vue.config.js

下面主要用到2个插件svg-sprite-loadersvgo-loader。所以先安装他们

使用

之后把SVG导入到src/assets/svg/下,例如你导入了一张main.svg的文件,然后在文件上这样使用

在Vite上使用

安装 svg-sprite-loader

SvgIcon component

新建plugins文件下新建svgBuilder.ts

更新tsconfig.node.json

src目录下新建`icons`文件夹内存放svg图标

vite.config.ts中

使用

  • Vue
  • Html
  • CSS3小技巧-在div中iframe出现滚动条问题代理工具使用说明
    • Waline
    目录