在前端开发中，图标是非常重要的组件之一。如何在 Vue 项目中使用 svg 图标呢？今天我们要介绍一个 npm 包，vue2-svg-icon，可以帮助你轻松添加 svg 图标到你的 Vue 应用中。
简介
vue2-svg-icon 是一个 Vue 组件，通过使用它，你可以轻松的在你的 Vue 应用中引入 svg 图标，并且可以使用它来创建基于 svg 的图标库。
其中，vue2-svg-icon 使用了 vue-svg-loader 来加载 svg 代码。在 webpack 的模块化环境下，它会自动地将 svg 代码转换成 Vue 组件，从而可以在你的 Vue 应用中使用。
安装
你可以通过 npm 安装 vue2-svg-icon：
npm install vue2-svg-icon --save
使用
在 Vue 项目中引入 vue2-svg-icon，然后在组件中使用 svg-icon 标签，例如：
-- -------------------- ---- -------
----------
-----
--------- ---------------------- --
------
-----------
--------
------ ------- ---- ---------------
------ ------- -
----------- -
-------
-
-
---------其中，icon-class 属性指定了图标文件的名称，它是一个必选参数。假设你有一个名称为 svg-heart 的图标文件，你可以在该组件中引用它。
-- -------------------- ---- -------
----------
-----
--------- ---------------------- ---------- --
------
-----------
--------
------ ------- ---- ---------------
------ ------- -
----------- -
-------
-
-
---------你可以使用 size 属性来指定 svg 图标的大小，以像素为单位。默认情况下，svg-icon 组件的大小是 1em。
创建图标库
vue2-svg-icon 还提供了一种简单的方法来创建基于 svg 的图标库。你只需要在项目中创建一个包含所有 svg 图标的目录，然后在应用的 main.js 中引入这个图标库目录。
首先，你需要在你的应用中创建一个包含所有 svg 图标的目录。例如，我们在项目中创建了一个 icons，它包含了我们所有的 svg 图标文件。
然后，在应用的 main.js 中引入 icons 目录，将其注册为全局组件：
import Vue from 'vue'
import SvgIcon from 'vue2-svg-icon'
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icons', false, /\.svg$/)
requireAll(req)
Vue.component('svg-icon', SvgIcon)现在，你可以在整个应用中使用 svg-icon 组件来引用这些 svg 图标了。
-- -------------------- ---- -------
----------
-----
--------- ---------------------- --
------
-----------
--------
------ ------- -
-
---------总结
vue2-svg-icon 是一个非常方便的 npm 包，可以帮助你轻松引入和使用 svg 图标到你的 Vue 应用中，甚至可以帮助你创建基于 svg 的图标库。在你的下一个 Vue 项目中，不妨尝试一下 vue2-svg-icon 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573f81e8991b448d434a