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