在前端开发中，我们经常需要使用图标来增强页面的视觉效果。而 @svg-icons/heroicons-outline 就是一个提供优质 SVG 图标的 npm 包。本文将介绍如何使用该 npm 包。
安装
使用 npm 安装该包：
--- ------- ----------------------------
使用
1. 导入
在需要使用该包的组件中，先导入需要使用的图标：
------ - --------- ------- - ---- ------------------------------
2. 嵌入
然后可以在模板中直接使用：
--------- ---------- ----------- ------------------- -------- ---------- ----------- ------------------
一个 icon 的大小取决于它的 viewBox 大小和 width/height 属性。如果你想使用不同的大小，请按照以下示例更改宽度和高度属性：
--------- ---------- ----------- ------------------- --------- ---------- ----------- ------------------- --------- ---------- ----------- -------------------
3. 自定义样式
需要注意的是，由于该组件使用的是 inline SVG，所以可以使用 CSS 来更改 SVG 的样式。例如，可以为每一个组件添加一个类名：
---------- - ----- ---- - --------- - ------- ----- -
示例代码
下面是一个 Vue.js 单文件组件的示例代码：
----------
-----
--------- ---------- ----------- -------------------
-------- ---------- ----------- ------------------
------
-----------
--------
------ - --------- ------- - ---- ------------------------------
------ ------- -
----------- - --------- ------- -
-
---------
------ -------
---------- -
----- ----
-
--------- -
------- -----
-
--------总结
通过以上步骤，我们可以很方便地使用 npm 包 @svg-icons/heroicons-outline 来添加优质 SVG 图标，提升我们页面的设计效果。同时我们也可以通过示例代码来更好地理解和使用该 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f24f34f3b0ab45f74a8b93f