您好,登录后才能下订单哦!
这篇“基于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只能实现自定义组件引入图标”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。