什么是 themify-enhanced
themify-enhanced 是一个基于 Themify 的图标库进行增强的 npm 包。它提供了更多的图标样式、大小、颜色等自定义选项，可以帮助开发者更方便地在前端页面中使用图标，并满足各种不同的 UI 设计需求。
安装
在使用 themify-enhanced 之前，需要先在项目中安装该包。可以使用 npm 或 yarn 进行安装。
npm install themify-enhanced --save
yarn add themify-enhanced
使用
安装完成后，就可以在项目中引入 themify-enhanced 包了。以下是一个简单的示例：
import 'themify-enhanced/css/themify-icons.css'; import 'themify-enhanced/css/themify-enhanced.css';
这里分别引入了 themify-icons.css 和 themify-enhanced.css 两个样式文件。前者是 Themify 官方提供的图标库样式，后者是 themify-enhanced 的增强样式。
基本使用
使用 themify-enhanced 提供的图标，只需要在 HTML 中定义相应的元素，然后添加对应的样式类即可。例如：
<i class="ti-home"></i>
这里使用了 "ti-home" 样式类，表示使用 Themify 官方提供的 "home" 图标。
自定义样式
themify-enhanced 提供了多种自定义选项，可以通过在元素上添加不同的样式类进行设置。
大小
使用 "ti-lg" 样式类可以将图标设置为更大的尺寸：
<i class="ti-home ti-lg"></i>
还可以使用 "ti-2x"、"ti-3x"、"ti-4x" 等样式类进行更细致的尺寸控制。
颜色
使用 "ti-text-*" 样式类可以为图标设置不同的颜色，其中 * 可以为阿拉伯数字、HEX 颜色码、RGB 颜色码：
<i class="ti-home ti-text-1"></i> <i class="ti-home ti-text-#f00"></i> <i class="ti-home ti-text-rgb(255,0,0)"></i>
还可以使用 "ti-text-primary"、"ti-text-secondary" 等样式类，对应主题颜色和次要颜色。
样式
除了大小和颜色，themify-enhanced 还提供了多种其他样式类进行风格和样式上的区分，例如：
<i class="ti-home ti-outline"></i> <!-- 线框风格 --> <i class="ti-home ti-shadow"></i> <!-- 带阴影效果 --> <i class="ti-home ti-rotate-45"></i> <!-- 旋转 45 度 --> <i class="ti-home ti-slice"></i> <!-- 三三等分样式 --> <i class="ti-home ti-emboss"></i> <!-- 凸起效果 -->
这里只列出了部分样式类，更详细的说明可以参考官方文档。
组件化应用
在实际的前端开发中，将 themify-enhanced 应用于组件开发中，可以更好地提高代码的复用性和可维护性。下面是一个基于 Vue.js 的示例：
-- -------------------- ---- -------
----------
-- -----------------------
-----------
--------
------ ------- -
------ -
----- ------- -- ------- -------
----- ------ ------- -------- ---- -- -----
------ ------ ------- -------- ---- -- -----
------ ------ ------- -------- ---- -- -----
--
--------- -
----------- -
--- ------- - ------ -------------------
-- ----------- -
--------------------------------
-
-- ------------ -
---------------------------------
-
-- ------------ -
---------------------------------
-
------ -------------- ---
--
--
--
---------这里通过 Vue.js 的组件化实现了一个可以根据属性自动构建 icon 的组件。使用时只需要在父组件中传入相应的属性即可：
-- -------------------- ---- ------- ---------- ------- ----------- --------- -------------- -- ----------- -------- ------ ------ ---- ---------------------- ------ ------- - ----------- - ------ -- -- ---------
总结
themify-enhanced 是一个非常实用的 npm 包，可以帮助开发者更方便地使用 Themify 提供的图标，并在样式上进行更加细致的控制。通过本文的详细介绍和示例代码，读者应该可以快速上手使用 themify-enhanced，并集成到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005538f81e8991b448d0bf3