Vue实现自定义组件的方式引入图标

这篇文章主要讲解了“Vue实现自定义组件的方式引入图标”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue实现自定义组件的方式引入图标”吧！

前言

在项目开发中，使用图标的方式有很多种，可以在iconfont上面找到合适的图标，通过Http或者直接下载使用，这里我分享一种通过实现自定义组件的方式引入图标。

搭建环境

这里通过@vue/cli 4.5.13新建项目，并且需要安装依赖svg-sprite-loader，用来处理对应的svg图标，方便我们使用。

安装： npm install --save-dev svg-sprite-loader

配置vue.config.js

在安装svg-sprite-loader后，新建vue.config.js来配置依赖：

// vue.config.jsconst { resolve } = require('path')module.exports = {  chainwebpack(config) {    config      .module      .rule('svg')      .exclude      .add(resolve('src/icons'))      .end()    config      .module      .rule('icons')      .test(/\.svg$/)      .include      .add(resolve('src/icons'))      .end()      .use('svg-sprite-loader')      .loader('svg-sprite-loader')      .options({        symbolId: 'icon-[name]'      })  }}

这里通过chainWEBpack来做了两项配置：

• 第一个是让原来的其他处理svg的依赖不处理src/icons下我们的自定义图标文件

• 通过svg-sprite-loader来处理自定义的图标文件，options里面的设置表示，生成的svg的symbolId为icon和文件名的拼接。

新建图标组件

在components目录下新建一个SvgIcon.vue文件：

<template>  <i class="icon">    <!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) -->    <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">      <use :xlink:href="iconName" rel="external nofollow" ></use>    </svg>  </i></template><script lang="ts">import { PropType, toRefs } from 'vue'export default {  props: {    size: {      type: Number as PropType<number>,      default: 14    },    fillColor: {      type: String as PropType<string>,      default: '#000'    },    iconName: {      type: String as PropType<string>,      required: true    }  },  setup(props: any) {    const { size, fillColor, iconName: _iconName } = toRefs(props)    const iconName = `#${_iconName.value}`    return {      size,      fillColor,      iconName    }  }}</script>

然后，新建一个icons目录，并且新建一个index文件，用来挂在组件和引入svg图标：

// index.tsimport SvgIcon from '@/components/SvgIcon.vue'import { App } from 'vue'export default (app: App) => {  app.component('svg-icon', SvgIcon)}const ctx = require.context('./svg', false, /\.svg$/)const requestAll = (ctx: __WebpackModuleapi.RequireContext) => ctx.keys().forEach(ctx)requestAll(ctx)

// main.tsimport { createApp } from 'vue'import App from './App.vue'import installSvgIcon from '@/icons/index'const app = createApp(App)installSvgIcon(app)app.mount('#app')

这个文件做了两件事：

1. 通过导出一个方法来挂载全局组件svg-icon；

2. 通过require.context来实现自动化引入svg目录下的图标文件。

使用组件

首先，我们要在icons/svg目录下存放svg图标文件（在iconfont上找自己需要的）；

然后，就可以在其他地方使用啦：

<template>  <img alt="Vue loGo" src="./assets/logo.png">  <svg-icon icon-name="icon-dashboard"></svg-icon>  <HelloWorld msg="Welcome to Your vue.js + typescript App"/></template>

直接通过组件svg-icon的方式引入，然后传入icon-name即可，icon-name的值由icon拼接svg文件名组成。

总结

这种自定义方式引入svg图标的方式，还是挺方便的，想要加上一个图标的时候，几步即可：

1. 直接下载好svg文件放入对应目录中；

2. 接着通过svg-icon组件来引入。

但是，修改样式时不能通过CSS来修改，这点就不太方便了。

感谢各位的阅读，以上就是“Vue实现自定义组件的方式引入图标”的内容了，经过本文的学习后，相信大家对Vue实现自定义组件的方式引入图标这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！