基于Vue只能实现自定义组件引入图标

这篇“基于Vue只能实现自定义组件引入图标”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“基于Vue只能实现自定义组件引入图标”文章吧。

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供成都网站设计、网站制作、网站策划、网页设计、域名申请、网站空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

搭建环境

这里通过@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.js
const { 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文件：

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

// index.ts
import 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.ts
import { 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上找自己需要的）；

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

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

以上就是关于“基于Vue只能实现自定义组件引入图标”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。