Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库

一.安装插件

npm install svg-sprite-loader --save-dev

二:配置,在Vue.config.js加入处理 svg 的 loader

//3.0版本chainWebpack: config => {const svgRule = config.module.rule('svg')// 清除已有的所有 loader。// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear()svgRule.test(/\.svg$/).include.add(path.resolve(__dirname, './src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})const fileRule = config.module.rule('file')fileRule.uses.clear()fileRule.test(/\.svg$/).exclude.add(path.resolve(__dirname, './src/icons')).end().use('file-loader').loader('file-loader')}

三,根目录创建icons文件夹,来放所有的svg文件,也可直接去github官网下载icons文件地址直接复制

index.js代码

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

在src/components下新建文件夹及文件SvgIcon/index.vue

index.vue代码: .svg-icon:可自定义设置大小

<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners"><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>

四,在main.js中引入并注册

五,使用

<svg-icon icon-class="svg的文件名" class-name="card-panel-icon" />

去阿里矢量库下载你需要的图标,添加到icons的svg目录下,可自定义文件名及使用 ,地址: 阿里巴巴矢量图标库

更多学习关注公众号:程序猿的进化

Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库相关推荐

windows下载安装Vue开发者工具(VueDevtools)，同时支持vue2.0和vue3.0两个版本
前言 vue开发者工具可以帮助我们提高开发效率,如果不安装控制台老是现在这些东西,对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤下载安装首先进入vue官网找到如下位置然后就会进入gi ...
vue项目使用svg图片
(svg-sprite-loader以及vue2-svg-icon的使用) 第一种方式: 1.安装svg-sprite-loader npm install svg-sprite-lo ...
前端学习（2670）： vue3.0实战开始建立新项目功能清单
前端学习（2669）： vue3.0实战开始建立新项目
java sl4j 日志_为Java项目添加slf4j的log日志-阿里云开发者社区
我们今天要给之前编码的一个maven的web项目提供slf4j的日志,这样所有的日志信息可以显示到项目的某个目录的log文件中. 项目的样子如下图: 首先配置pom,我也不知道下面的内容是否必要 or ...
使用umiJs搭建前端项目添加背景图片
1.找到路径修改全局样式的文件名为 global.less,我们可以在浏览器界面使用 F12 打开检查元素窗口,找到对应布局的标签.由于 React 构建的是单页面应用,直接找 <div id ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
基于vue3.0简单的页面使用
基于vue3.0简单的页面使用项目效果图项目文件图 package.json main.js App.vue views/Tutorial.vue views/TS.vue views/Docs. ...

Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库

一.安装插件

二:配置,在Vue.config.js加入处理 svg 的 loader

三,根目录创建icons文件夹,来放所有的svg文件,也可直接去github官网下载icons文件地址直接复制

index.js代码

在src/components下新建文件夹及文件SvgIcon/index.vue

index.vue代码: .svg-icon:可自定义设置大小

四,在main.js中引入并注册

五,使用

去阿里矢量库下载你需要的图标,添加到icons的svg目录下,可自定义文件名及使用 ,地址: 阿里巴巴矢量图标库

更多学习关注公众号:程序猿的进化

Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库相关推荐

最新文章

热门文章

Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库

一.安装插件

二:配置,在Vue.config.js加入处理 svg 的 loader

三,根目录创建icons文件夹,来放所有的svg文件,也可直接去github官网下载icons文件地址 直接复制

index.js代码

在src/components下新建文件夹及文件SvgIcon/index.vue

index.vue代码: .svg-icon:可自定义设置大小

四,在main.js中引入并注册

五,使用

去阿里矢量库下载你需要的图标,添加到icons的svg目录下,可自定义文件名及使用 ,地址: 阿里巴巴矢量图标库

更多学习关注公众号:程序猿的进化

Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库相关推荐

最新文章

热门文章

三,根目录创建icons文件夹,来放所有的svg文件,也可直接去github官网下载icons文件地址直接复制