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
iconfont 在vue项目中的应用(icon-component组件)的更多相关文章
- 更换vue项目中标签页icon
问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改 ...
- vue项目中的elementUI的table组件导出成excel表
1.安装依赖:npm install --save xlsx file-saver 2.在放置需要导出功能的组件中引入 import FileSaver from 'file-saver' impor ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
- vue element-ui中引入第三方icon
vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- jq-demo-购物车
首页 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title& ...
- ps切图的基本操作
参考线和辅助线 ctrl+r呼出标尺,只有在移动工具(快捷键v)下,鼠标左键从标尺上可以拖出来新的参考线.将参考线拖回标尺即是删除. 导出切片 快捷键ctrl+alt+shift+s ,选择png-2 ...
- 记录一下webpack好用的node模块
postcss-loader autoprefixer: 自动添加css前缀 css-loader: 能在js文件中导入css(配合React比较好,我猜) style-loader: 将所有的计算后 ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- HIVE的高级操作
二.视图 1.Hive 的视图和关系型数据库的视图区别 和关系型数据库一样,Hive 也提供了视图的功能,不过请注意,Hive 的视图和关系型数据库的数据还是有很大的区别: (1)只有逻辑视图,没有物 ...
- vue-cli3+ant-design-vue+typescript 注意事项
项目参考vue-cli3-web-init ant-design配置部分 1. 实现ant-disign-vue的按需加载方案 (1)引入所有的组件,然后加载到vue上面 components-ant ...
- 暑假集训test-8-28
大概是从我一年以来做过的最傻逼的一套题了.. 一个半小时打完三个程序三个暴力拍完以为自己AK了,开心地耍了两个小时. 结果T3要写高精,LL炸了后4个点,中间还有个点是啥都不选的,我没用0去更新又炸了 ...
- NX二次开发-重命名装配组件
在GC工具里面是有一个重命名装配组件的命令的,除了这个外,好像没看到NX里还有其他可以重命名装配组件的命令,本来以为在UFUN ASSEM装配的头文件里会有更改装配部件名字的函数,但是没有找到,可能没 ...
- Tomcat debug 模式, Application一直reload,导致内存溢出
在server.xml配置文件中,将reloable改为false.
- DXP 快捷键
EC 复制 EY array paste TU: update