前言
在前端开发中，使用图标是一个很常见的需求。而 @svg-icons/evil 就是一款基于 SVG 的图标库，它包含了一系列设计精美、多用途的图标。
本文将介绍如何在项目中引入并使用 @svg-icons/evil，希望能够帮助到初学者以及前端开发者。
安装
在项目中使用 @svg-icons/evil，你需要先在项目中安装它。安装方式如下：
npm install @svg-icons/evil
在安装完成后，你就可以开始在项目中使用 @svg-icons/evil 了。
使用
引入图标
使用 @svg-icons/evil 需要将它引入到项目中。在需要使用图标的地方，你可以使用以下方式引入图标：
import { EvilIcons } from '@svg-icons/evil';可以在 import 中指定需要使用的图标库，或者全部引入：
import * as icons from '@svg-icons/evil';
显示图标
引入图标后，你需要在 HTML 中添加以下代码显示图标：
<svg class="icon" viewBox="0 0 20 20" fill="currentColor"> <use xlink:href="#icon-name" /> </svg>
其中 #icon-name 是你需要使用的图标名称。
你也可以在 CSS 中直接使用 content 属性来显示 SVG 图标，例如：
.btn::before {
content: url("~@svg-icons/evil/icons/arrow-right.svg");
}图标名称
每个图标都有独一无二的名称。在使用图标时，使用相应的名称即可，例如：
<icons.Search />
图标大小
你可以通过以下方式改变图标的大小：
<svg class="icon" viewBox="0 0 20 20" fill="currentColor" width="24" height="24"> <use xlink:href="#icon-name" /> </svg>
或者在 CSS 中设置 width 和 height 属性：
.icon {
width: 24px;
height: 24px;
}颜色
使用 fill 属性设置图标的颜色：
<svg class="icon" viewBox="0 0 20 20" fill="red"> <use xlink:href="#icon-name" /> </svg>
示例
以下是一个简单的示例，演示了如何在 React 中使用 @svg-icons/evil：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------------
-------- ----- -
------ -
---- ----------------
------- --
------
--
-
------ ------- ----结语
@svg-icons/evil 作为一款基于 SVG 的图标库，具有较多的使用优势。希望本文能够帮助你更好地了解和使用该库，提升你的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2511c73b0ab45f74a8b953