Vue项目中引入阿里icon图标

一、创建Svglcon组件
二、创建icons文件夹
三、main.js中引入
四、配置
五、使用

iconfont——国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。
链接：iconfont官方地址

一、创建Svglcon组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script>
export default {name: 'svg-icon',props: {iconClass: {type: String,required: true},className: {type: String}},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>

二、创建icons文件夹

svg文件夹中用来存放各种扩展的.svg图标, 点击下载后，将下载好的fiter.svg复制到svg文件夹中即可。

index.js：

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

三、main.js中引入

#下载插件
cnpm i svg-sprite-loader --save
import './icons'

四、配置

在build/webpack.base.conf.js文件中，加入：

      {test: /\.svg$/,loader: 'svg-sprite-loader',include: [resolve('src/icons')],options: {symbolId: 'icon-[name]'}}

并在以下配置中添加exclude: [resolve('src/icons')]：

      {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve('src/icons')],options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},

五、使用

通过icon-class属性来引用svg文件的名称。

<svg-icon icon-class="user" />

文章来自：vue中引入.svg图标，使用iconfont图标库

Vue项目中引入阿里icon图标相关推荐

vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
在iview + vue项目中使用自定义icon图标
最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库. 1. UI设计师会把自 ...
vue项目中使用阿里icon库
从阿里字体图标库新建一个项目(当然也可选择其他icon库) 注意:Font class前缀不要和elment-ui中的图标前缀一样 2.选择需要的图标添加至项目,并生成Font class,下载至本地 ...
vue项目中引入阿里云滑动验证
注册阿里云账号参照滑动验证demo 滑动验证在vue中使用步骤 1.在vue-cli安装的项目中,index.html页面引入js <html><head><meta ...
vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...

Vue项目中引入阿里icon图标

Vue项目中引入阿里icon图标

一、创建Svglcon组件

二、创建icons文件夹

三、main.js中引入

四、配置

五、使用

Vue项目中引入阿里icon图标相关推荐

最新文章

热门文章