iconfont的symbol方式引入项目不显示

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法

拷贝项目生成的symbol代码

加入通用css代码（引入一次就行）

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

这个"#icon-xxx"迷惑了一下我，导致一直出不来icon,其实引入id就好了，就是你直接#xxx就可以了，比如"#home"

封装一下这个获取类名

const IconFont = ({type, style, className = ''}) => {return <><svg className={`icon ${type} ${ className }`} aria-hidden="true" style={style || null}><use xlinkHref={`#${type}`}></use></svg></>
}export default IconFont

引入封装好的组件

<IconFont type='home'  />

iconfont的symbol方式引入项目不显示相关推荐

ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示
最近在写项目遇到了一个问题,我使用vue框架搭建了一个项目. 我创建了一个 index.js文件,内容为: import { Icon } from 'ant-design-vue'; const I ...
基于C#的GIS开发20210426之类库同名类、制作winform控件、建立控件之间的关联、自己制作控件、自己控件引入项目、显示磁盘文件夹、磁盘文件与picturebox建立关系、图像拉伸
C#知识点与控件的制作一.C#中多个类库中有同名类,区分问题二.制作最简单的winform控件 1.拖动加载事件代理筛选器 2.显示属性.事件,及其修改常见控件属性介绍窗体常用的方法常见 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
前言为什么要使用阿里图标库: 图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
iconfont通过font class引入显示小方块bug
官网显示iconfont通过font class引入有两种方式: 1.直接查看链接用link引入线上cdn //at.alicdn.com/t/c/font_3680524_qjgj55gtmj.cs ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
1.进入官方网站:iconfont-阿里巴巴矢量图标库 2.在搜索框搜索想要使用的图标,选择心仪的图标后点击添加购物车,可以选择多个. 3.选择完成后点击右上角购物车,弹出页面后点击添加至项目,选择项 ...
react项目通过iframe方式引入html页面
项目中会碰到在react项目中引入html静态页面的需求,以下是解决方法: 主要实现:通过<iframe>方式引入,以下是核心代码部分: import data from './data. ...
SpringBoot项目在eclipse中能运行，部署到服务器 nohup java -jar 方式运行就无法显示报错
SpringBoot项目在eclipse中能运行,部署到服务器 nohup java -jar 方式运行就无法显示报错: *************************** APPLICATION ...

iconfont的symbol方式引入项目不显示

拷贝项目生成的symbol代码

加入通用css代码（引入一次就行）

挑选相应图标并获取类名，应用于页面

封装一下这个获取类名

引入封装好的组件

iconfont的symbol方式引入项目不显示相关推荐

最新文章

热门文章