前端项目优雅使用svg

date

Apr 8, 2023 01:41 AM

type

status

slug

summary

前言

在前端开发中，大家都接触到设计图。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后才可展示图形。

通过上面示例代码可以看出：

<use>元素可以跨<svg>元素引用<symbol>

<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-loader和svgo-loader。所以先安装他们

使用

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

前言

SVG Sprite

webpack-vue上使用

在`src/components`下建立一个`SvgIcon`组件

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

在`main.js`中引入

修改`vue.config.js`

使用

在Vite上使用

安装 `svg-sprite-loader`

SvgIcon component

新建`plugins`文件下新建`svgBuilder.ts`

更新`tsconfig.node.json`

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

vite.config.ts中

使用

前言

SVG Sprite

webpack-vue上使用

在src/components下建立一个SvgIcon组件

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

在main.js中引入

修改vue.config.js

使用

在Vite上使用

安装 svg-sprite-loader

SvgIcon component

新建plugins文件下新建svgBuilder.ts

更新tsconfig.node.json

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

vite.config.ts中

使用

在`src/components`下建立一个`SvgIcon`组件

在`main.js`中引入

修改`vue.config.js`

安装 `svg-sprite-loader`

新建`plugins`文件下新建`svgBuilder.ts`

更新`tsconfig.node.json`