前言
随着前端技术的不断发展，我们能够对网页上的内容进行更加细致个性化的设置。而在这其中，图标设计也不可或缺。@blueeast/bluerain-plugin-vector-icons 就是这样一款工具，它提供了全面、高质量的矢量图标资源和自定制图标的功能，方便了前端开发人员的工作。本文将详细介绍该工具的使用教程。
安装
@blueeast/bluerain-plugin-vector-icons 是一个 npm 包，因此可以在终端中通过 npm 命令进行安装。可以通过 yarn 来安装也可以使用 npm。以下是具体步骤：
npm install @blueeast/bluerain-plugin-vector-icons
使用方式
引入本地图标
安装 @blueeast/bluerain-plugin-vector-icons 后，需要把需要使用的图标下载到本地中，比如将
icon-home.svg下载至本地文件夹/assets/icons。assets/icon-home.svg
在使用的 html 中反转义该 svg 文件。
-- -------------------- ---- ------- --------- ----- ------ ------ ------- ----------------------------------------------- ----------------------- ---------- ------- ------ -- ---------- ------------- -------- --- ---- - ----- ----------- - ---- ------ ------------------------------------------ -------- -------- - ----------------------------- -------- ---------- ---- ------ --------- ----------------------------------- --- -- -- ------- ---- ------ --------- --------------------------------------------- ------ ------------------------- --------------------- ----------------- ------------ ------------ ----- -------- ------------------ --------------------- ---------------------------------- ------ -------- --------- -- --- --------- ---------- - -------------------------- ----------------------------------- ------ -------- --------- -- --- --------- ---------- - ----------------------------------- ------ ---- ----------- ---------------------------- ------- ----- ------------ --------------- - -- --- ---------------- ------- ---- ---- - - ----- ----- ------------------------- ------------------------------------ --------------------------- - ----- --------- ------- -------
展开代码
在项目中自定义图标
而如果使用的是自定义的图标，需要进行如下操作：
新建
my-icon.svg文件，格式示例如下：<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path d="M20.8 28.2l2-2.2c-.7-1.3-1.1-2.8-1.1-4.3 0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6c-1.5 0-2.9-.5-4.1-1.4zm-1.5-11.2c-2.6 0-5.1.6-7.4 1.7l-5.5-5.5c-.4-.4-.9-.6-1.4-.6-.5 0-1 .2-1.4.6l-1.1 1.1c-.8.8-.8 2 0 2.8l5.6 5.6c-.9 2.3-1.5 4.8-1.5 7.4 0 8.3 6.7 15 15 15s15-6.7 15-15-6.7-15-15-15"></path> </svg>
在项目中引入
my-icon.svg。import * as myIcon from './my-icon.svg'
或者在项目中通过
require引入：const myIcon = require('./my-icon.svg')
然后就可以在页面中使用该图标：
<!-- code here --> <i :class="$style.myIcon"></i>
用法示例
以下是在 vue 中使用 @blueeast/bluerain-plugin-vector-icons 的完整示例。
-- -------------------- ---- ------- ---------- ----- ------------------------------------------ --------- ---- ------------- ------------------ -- ----------------------------- ------ ---- ------------- ---------------- -- --------------------------- ------ ------ ----------- -------- ------ - -- -------- ---- ------------------- ------ - -- ------ ---- ---------------------- ------ ------- - ----- ------ ------ - ------ - ---- -------- -- ---- ------ ----- - -- - --------- ------- ------- ---------------------------------------------------------------- --------- - -------- --------------------------- -------- - ------- - ----------------- ---------------------------- ---------------- -------- ------- ----- - --------展开代码
结语
@blueeast/bluerain-plugin-vector-icons 提供了一种简单的方式来使用矢量图标，在项目开发中扮演了越来越重要的角色。学习、使用和了解 @blueeast/bluerain-plugin-vector-icons 工具可以帮助我们更加高效地开发 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/blueeast-bluerain-plugin-vector-icons
