Vue.js 项目中如何使用 SVG 图标

Vue.js 是一款流行的前端框架，它的灵活性和强大的生态系统为前端开发者提供了丰富的工具和库来构建优秀的 Web 应用程序。在其中 Vue 的 SVG 图标的使用，可以让我们更好地完美使用独特的图标效果。本文将深入介绍如何在 Vue.js 项目中使用 SVG 图标。

为什么使用 SVG 图标

SVG（可缩放矢量图形）是一种基于 XML 的向量图形格式，它可以实现无损放大而不失真，显示效果清晰稳定。与像素图形（如 PNG、JPEG）相比，SVG 在大小调整、屏幕适配、动效等方面的表现更加优秀。

在 Vue.js 项目中使用 SVG 图标的方式

Vue.js 有多种方式可以使用 SVG 图标，此处我们介绍潜在的两种方式。

1. 使用 Vue CLI 插件

Vue 官方提供了一个插件 vue-cli-plugin-svg-icon，可以让我们方便地导入 SVG 图标并使用它们。

步骤：

1. 安装插件：

   npm i vue-cli-plugin-svg-icon -D

2. 在 vue.config.js 中，配置插件：

   const SvgIconPlugin = require('vue-cli-plugin-svg-icon')
   module.exports = {
     plugins: [
       // 传递给插件的选项
       new SvgIconPlugin({
         // 配置 Loader 类型
         loaderOptions: {
           symbolId: 'icon-[name]'
         },
         // 用户定义的选项
         svgoOptions: {}
       })
     ]
   }

   这里重点介绍一下 loaderOption 的配置。

   • symbolId ：用于设定使用 template 方式渲染 SVG 的 id 属性的格式，默认是 icon-[name]。

3. 导入 SVG 图标：

   <template>
     <div>
       <svg-icon icon-class="xxx"/>
     </div>
   </template>
   <script>
   // 图标是 xxx.svg 文件
   import '@/icons/xxx.svg'
   </script>
   <style scoped>
   /* Override default SVG styles */
   .xxx path {
     fill: #333;
   }
   </style>

   • svg-icon 组件用于渲染 SVG；
   • icon-class 属性将用来决定最终渲染的 SVG 图标。

2. 使用 vue-svg-icon Component

vue-svg-icon Component 是另一种使用 SVG 图标的方式，它是一组基于 Vue.js 的 SVG 图标组件库。该组件库可以方便地使用默认图标，或自行添加自定图标。

步骤：

1. 安装组件库：

   npm i vue-svg-icon-component -S

2. 全局注册组件：

   import Vue from 'vue'
   import SvgIcon from 'vue-svg-icon-component/src/components/SvgIcon.vue'
   Vue.component('svg-icon', SvgIcon)

3. 导入 SVG 图标：

   <template>
     <div>
       <svg-icon name="xxx" />
     </div>
   </template>
   <script>
   export default {
     name: 'App',
     components: {
       SvgIcon
     }
   }
   </script>
   <style scoped>
   /* Override default SVG styles */
   .xxx path {
     fill: #333;
   }
   </style>

   • svg-icon 组件用于渲染 SVG；
   • name 属性将用来决定最终渲染的 SVG 图标。

总结

以上，我们从 SVG 图标的应用价值入手，流程性地介绍了 Vue.js 两种使用 SVG 的方式。其中，在使用 SVG 图标的同时，我们了解了许多相关概念和开发技巧。通过本文，相信您能更好地利用 SVG 图标在 Vue.js 项目中构建更优秀的 Web 应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f63c8add4f0e0ff807f4a