这篇“基于Vue只能实现自定义组件引入图标”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“基于Vue只能实现自定义组件引入图标”文章吧。
这里通过@vue/cli 4.5.13新建项目，并且需要安装依赖svg-sprite-loader，用来处理对应的svg图标，方便我们使用。
安装： npm install --save-dev svg-sprite-loader
在安装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文件：
<template>
<i>
<!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) -->
<svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</svg>
</i>
</template>
<script>
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.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")这个文件做了两件事：
通过导出一个方法来挂载全局组件svg-icon；
通过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文件名组成。
以上就是关于“基于Vue只能实现自定义组件引入图标”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
