iconfont 在vue项目中的应用（icon-component组件）

前言：上一篇记录了iconfont的三种基本使用方法。     在Vue中应该如何使用呐？Vue中的组件化思想很明确，要提高组件的复用率，增强项目的可维护性，扩展性。以下是采用icontfont的使用方式之symbol封装的icon-component组件。

//components/Icon-svg
//创建 icon-component 组件
<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script>
export default {name: 'icon-svg',props: {iconClass: {type: String,required: true}},computed: {iconName() {return `#icon-${this.iconClass}`}}
}
</script><style>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>//引入svg组件
import IconSvg from '@/components/IconSvg'//全局注册icon-svg
Vue.component('icon-svg', IconSvg)//在代码中使用
<icon-svg icon-class="password" />

参考：https://juejin.im/post/59bb864b5188257e7a427c09

转载于:https://www.cnblogs.com/catherLee/p/10069730.html

iconfont 在vue项目中的应用（icon-component组件）相关推荐

在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
vue项目中使用阿里icon库
从阿里字体图标库新建一个项目(当然也可选择其他icon库) 注意:Font class前缀不要和elment-ui中的图标前缀一样 2.选择需要的图标添加至项目,并生成Font class,下载至本地 ...
vant部署_详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
在iview + vue项目中使用自定义icon图标
最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库. 1. UI设计师会把自 ...
vue项目中自动拉取更新Iconfont（阿里巴巴图标库）
在vue项目中使用 iconfont图标库,网上的栗子很多,这边就随手给一个,点这里上面的解决了,那我就很苦恼,我每次添加或删除或更新图标库,需要重新下载?自己手动去覆盖吗?我是拒绝的.so,自 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...

iconfont 在vue项目中的应用（icon-component组件）

iconfont 在vue项目中的应用（icon-component组件）相关推荐

最新文章

热门文章