iconfont使用svg

1、svg

（1）下载依赖

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

（2）在vue.config.js配置规则

const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}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]'}).end()}
}

（3）在src下创建icons文件夹以及在其下创建svg文件夹（存放iconfont的svg代码）和index

index.js内容

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

（4）在components下创SsvgIcon.vue组件（封装，并且上一步把它挂载到原型上）

<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>

（5）在main.js下引入icons

import './icons'

（6）使用svg（template就是你在icons下svg的文件名）

<svg-icon icon-class="template" style="font-size:18px;color:#409EFF"/>

iconfont使用svg相关推荐

icon-font与svg
icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...
Android应用开发之PNG、IconFont、SVG图标资源优化详解
PNG为位图,是由不同的排列和染色的像素点组成的图像,当放大位图时就能清晰的看见无数个小方块(像马赛克一样),所以位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩 ...
iconfont、svg图标字体下载并使用
iconfont.svg图标字体下载并使用文章目录 iconfont.svg图标字体下载并使用一.进入阿里巴巴官方字体库二.查找需要的图标并加入购物车三.新建项目四.使用svg图标库提示: ...
多媒体：图片PNG、IconFont、SVG图标资源优化详解
1 背景最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和 ...
Vue项目iconfont新增svg图标
最近接手一个开发一半的Vue3的后台管理项目,由于样式需要,需要新增一些svg图标,项目使用的是iconfont接下来我会通过几个步骤在原来iconfont基础上去新增一些自己的图标: 一.iconf ...
怎么使用 Iconfont 的 svg 矢量图标
场景:ui设计师把设计图标上传到 Iconfont ,前端从Iconfont下载所有图标,然后在代码中使用第一步:把项目的svg下载到本地解压打开是这样的: 第二步:把下载的文件放进项目asset ...
项目中的icon中的svg点击变颜色，下载的iconfont的svg不变颜色
在iconfont中下载的svg图片,里面有个fill属性,把他删除就可以了.有的是多个path标签,就有多个fill属性,一起删除.
阿里iconfont（SVG symbols方法）
SVG symbol Element 前端开发经常会用到一些图标,比较常用的一种方式就是使用阿里图标库iconfont来生成图标 iconfont 一共有三种引入方式供选择:SVG Symbol.Un ...
阿里巴巴图标库iconfont，svg图标颜色无法改变的解决方案
当我们使用svg图标时,颜色无法改变,我遇到的问题时,fill属性填充了颜色导致无法更改,解决方案有2个,此文章未更新完,时间紧张,先简单记录下,先放个二维码方便联系 css方式 svg { ...

iconfont使用svg

iconfont使用svg相关推荐

最新文章

热门文章