介绍
在前端开发中，图标库的使用越来越普遍。icon-safari 是一款基于 Safari 瀏覽器的图标库，提供了多种风格的图标，例如实心、描边、双色等，非常适合用于各种网站、APP 的图标设计。本文将详细介绍如何使用这一npm 库。
安装
使用 npm 安装 icon-safari：
npm install icon-safari --save
使用
引入
在项目中引入 icon-safari：
import 'icon-safari/dist/icon-safari.css';
或者在 HTML 文件中直接引入：
<link rel="stylesheet" href="node_modules/icon-safari/dist/icon-safari.css" />
基础用法
在 HTML 文件中使用 icon-safari：
<i class="isf-icon-heart"></i>
其中，isf-icon-heart 是 icon-safari 中 heart 图标的类名。
icon-safari 中的所有图标类名可在 官方文档 中的「图标列表」中查看。
组合用法
icon-safari 还提供了组合图标的功能，例如将 heart 图标和 star 图标组合起来一个爱心，使用方式如下：
<div class="isf-icon isf-icon-heart"> <i class="isf-icon-star"></i> </div>
其中，isf-icon 是组合图标的容器，内部的 i 标签是要组合的图标。
自定义颜色和大小
可以通过设置 container 的字体大小来改变 icon-safari 图标的大小，例如：
.isf-icon-heart {
font-size: 48px;
color: red;
}可以通过设置 container 的 color 属性来改变 icon-safari 的颜色。
icon-safari 还提供了一些特殊的颜色类，例如：
isf-color-primaryisf-color-successisf-color-warningisf-color-danger
使用方式如下：
<i class="isf-icon-heart isf-color-primary"></i>
更多细节可以参考 官方文档。
总结
本文介绍了如何使用 icon-safari npm 包，并详细介绍了其基础用法、组合用法和自定义颜色和大小的使用方法。icon-safari 可以方便地用于各种网站、APP 的图标设计，帮助前端开发者快速搭建优美的界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f41c7c5dbf7be33b25672b4