导航：首页 > 开发技术 >

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

发表于：2025-02-05 作者：千家信息网编辑

千家信息网最后更新 2025年02月05日，这篇"基于Vue只能实现自定义组件引入图标"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这

千家信息网最后更新 2025年02月05日基于Vue只能实现自定义组件引入图标

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

搭建环境

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

然后，新建一个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")

这个文件做了两件事：