npm 包 vue-multiple-icon 使用教程

在前端开发中，常常需要使用图标来辅助用户理解页面内容，同时也可以美化页面样式。vue-multiple-icon 是一款简单易用的包含多种图标的 npm 包，在 Vue.js 应用中可以轻松地使用它。

安装

在应用的根目录下，通过 npm 安装 vue-multiple-icon：

npm install vue-multiple-icon

使用

在 main.js 中导入并使用：

-- -------------------- ---- -------
------ --- ---- -----
------ --- ---- -----------
------ --------------- ---- -------------------

------------------------

--- -----
  ------- - -- -------
-----------------

然后在 vue 组件中使用它：

<vue-multiple-icon icon="like" />

可以看到，你已经可以在页面中显示一个名为 “like” 的图标了。默认情况下，它已经有了一些预设的图标，当然你也可以使用自定义的 svg 图标。

使用自定义的 svg 图标

以自定义一个名为 my-icon 的图标为例。

首先，在 src/assets/icons 目录下新建一个 my-icon.svg 文件，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="Your Path data" /></svg>

然后，在 src/components/ 目录下，新建一个 MyIcon.vue 文件，代码如下：

-- -------------------- ---- -------
----------
  ------------------ -------------- --
-----------

--------
------ ------- -
  ------ -
    ------ -
      ------- -
        ----- ----------
        ----- --------------------------------------
      --
    --
  --
--
---------

最后，在需要使用的组件中导入 MyIcon.vue：

-- -------------------- ---- -------
----------
  -----
    -------- --
  ------
-----------

--------
------ ------ ---- -------------------------

------ ------- -
  ----------- - ------ --
-
---------

这样就可以通过 <my-icon /> 显示你的自定义 svg 图标了。

可用图标列表

预设图标列表如下：

• like
• star
• heart
• smile
• meh
• frown
• check
• check-circle
• check-square
• close
• close-circle
• close-square
• info
• info-circle
• warning
• warning-circle
• plus
• plus-circle
• plus-square
• minus
• minus-circle
• minus-square

更多详情可以查看 vue-multiple-icon 的 Github 源码

总结

通过简单的使用示例，我们了解了 vue-multiple-icon 的基本使用方法，并学习了如何自定义 svg 图标。它的使用方便、可扩展性强，是开发 vue.js 应用中非常好用的一个组件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3581e8991b448daf56