本文介绍: vue.config.js中配置。main.js文件中引入。
先安装插件
- 配置svg文件夹,新建icons文件,svg文件夹放svg后缀文件
index.js文件中的配置
import Vue from "vue" import svgIcon from "@/common/iconSvg/index.vue" Vue.component('svg-icon',svgIcon) //挂载全局组件 //下面这个是导入svgIcon/svg下的所有svg文件 const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /.svg$/) /* 第一个参数是:'./svg' => 需要检索的目录, 第二个参数是:false => 是否检索子目录, 第三个参数是: /.svg$/ => 匹配文件的正则 */ requireAll(req);
- common文件夹下建vue文件(该文件路径根据自己项目文件夹,我是放到了common)
<template> <div> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </div> </template> <script> export default { name:'svgIcon', props:{ data_iconName:{ type:String, required:true }, className:{ type:String, default:'' } }, computed:{ svgClass(){ //svg 的class if(this.className){ return `svg-icon ${this.className}`; }else{ return 'svg-icon' } }, iconName(){ //svg xlink-href 指向的文件名 return `#icon-${this.data_iconName}`; } } } </script> <style scoped> .svg-icon{ vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
-
main.js文件中引入
-
vue.config.js中配置
const path = require('path') chainWebpack: config => { config.plugins.delete("prefetch") config.plugins.delete("preload") config.module .rule('svg') .exclude.add(path.join(__dirname, 'src/assets/icons')) .end() config.module .rule('icons')// 定义一个名叫 icons 的规则 .test(/.svg$/)// 设置 icons 的匹配正则 .include.add(path.join(__dirname, 'src/assets/icons'))// 设置当前规则的作用目录,只在当前目录下才执行当前规则 .end() .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置 .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader .options({// 该 svg-sprite-loader 的配置 symbolId: 'icon-[name]' }) .end() },
-
最后使用
<svg-icon data_iconName="changtinglogo" className="loginlogoSvg" />
原文地址:https://blog.csdn.net/zm9998/article/details/135777968
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_60969.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。