安装依赖

npm i svg-sprite-loader --save

目录结构

创建 svg-icon 组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"/></svg>
</template><script>
export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

在该组件的同级目录创建 index.js 和 svg文件夹，该文件夹下存放着svg文件


const requireAll = requireContext =>requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

修改 Vue cli3 配置

在vue.config.js 中

module.exports = {// svg 配置chainWebpack: config => {const svgRule = config.module.rule('svg')// 清除已有的所有 loader,如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear()// 添加要替换的 loadersvgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})},devServer: {proxy: {'/api': {target: 'http://localhost:8002', //对应自己的接口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}},publicPath: process.env.NODE_ENV === 'production' ? './' : './',outputDir: "dist", // 输出文件目录lintOnSave: false, // eslint 是否在保存时检查assetsDir: 'static', // 配置js、css静态资源二级目录的位置  }

使用

在main.js 入口文件中引入使用

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg组件
import '@/components/SvgIcon/index.js'
Vue.component('svg-icon', SvgIcon)

在组件中使用

// icon-class 就是svg文件的名称
<svg-icon :icon-class="value.icon"  />

例子

Vue.js使用矢量图相关推荐

vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
【Vue.JS】纯 Vue.js 制作甘特图
效果图在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
Vue中使用矢量图图标
在前台页面中开发过程中,有时候我们需要使用一些图标,来使我们的页面变得更加好看,下面介绍在vue中如何添加阿里巴巴的矢量图的图标打开阿里巴巴矢量图标库https://www.iconfont.cn/ ...
Vue.js轮播图走马灯 (详解)
直接上代码: 轮播图1: html <template><div><div class="back_add"><div class=&qu ...
html矢量图对画布的拖拽,d3.js画矢量图+可拖拽的实现思路
箭头.png testtt.html Arrow var width = 400; var height = 400; var svg = d3.select("body").ap ...
vue.js思维导图笔记
vue.js 多图上传，并可预览
<!DOCTYPE html> <html> <head><title>vue.js 简单多图上传图片</title><meta ht ...
VUE 项目图标全部替换成阿里巴巴矢量图
我们在做vue项目时,发现vue里的图标不能满足我们项目的需求,我们就需要去阿里巴巴矢量图里下载了. 阿里巴巴矢量图库中有两种格式的图标如下图第一个Unicode 样式,vue的使用方法如下第二个 ...

Vue.js使用矢量图

安装依赖

目录结构

创建 svg-icon 组件

修改 Vue cli3 配置

使用

例子

Vue.js使用矢量图相关推荐

最新文章

热门文章