在前端开发中,使用 SVG 图标可以让网站在各种设备上显示效果一致。而使用 SVG 符号库能够让我们更好地管理和重复利用图标资源。本文将介绍 gulp-svg-symbols
这个 npm 包的使用教程,并帮助你理解如何创建 SVG 符号库。
安装 gulp-svg-symbols
首先,在项目中安装 gulp-svg-symbols
:
--- ------- ---------------- ----------
创建一个基础的 SVG 文件
在开始使用 gulp-svg-symbols
之前,需要先准备一个基础的 SVG 文件,这里以一个简单的“搜索”图标为例:
---- ---------------------------------- ---------- - -- ---- ----- ----------- ---------- ------------------------- ----- - - ------- ----------- ------- - - - - -------------- ------- --- - - - --- --- --- --- - - ------------- ------
配置 gulpfile.js 文件
接下来,需要在 gulpfile.js
文件中配置任务。以下是一个基础的配置:
----- ---- - ---------------- ----- ---------- - ---------------------------- -------------------- ---------- - ------ ----------------------------------- ------------------- ------------------------------------------ ---
这里,gulp.src
指定了 SVG 文件的路径,而 svgSymbols()
就是我们使用 gulp-svg-symbols
的关键。最后,通过 gulp.dest
将生成的符号库文件输出到指定的目录。
创建 SVG 符号库
现在运行任务:
---- -------
你应该会在指定的 output/folder
目录下看到一个名为 symbols.svg
的文件,这就是生成的符号库!
让我们来看一下这个文件的内容。你会发现它与我们之前准备的 search.svg
文件有所不同:
---- ---------------------------------- --------------------- ------- ---------- - -- --- ----------------- ----- ----------- ---------- ------------------------- ----- - - ------- ----------- ------- - - - - -------------- ------- --- - - - --- --- --- --- - - ------------- --------- ------
这里,<symbol>
元素是 gulp-svg-symbols
自动生成的,它包含了我们之前准备的 SVG 图标。在此基础上,我们就可以在页面中使用这个符号库。
在网页中使用 SVG 符号库
下面是一个示例:
--------- ----- ------ ------ ----- ---------------- --------- --- ----------- ------- --- - ------ ----- ------- ----- - -------- ------- ------ --------- ------------------------------------------------- ------- -------
这里,我们使用 <use>
元素来引用符号库中的图标,其中 xlink:href
属性指定了要使用的图标 ID。同时,我们还通过 CSS 设置了 SVG 图
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/55100