react 通过 xlink 方式引用 iconfont
项目中采用 xlink 的方式引用 iconfont 文件,在正常的 html 文件中可以正常引用,但是在 react 下确不可以运行。
经过查找,发现需要更改如下
引入的属性默认为 xlink-href,在 react 下需要更改为驼峰式命名,即 xlinkHref
另外,如果采用 webpack 打包的方式,需要将 xlink 对应的 js 文件进行引入。
自我更新以及可能会帮助到过来的朋友,特此进行更进一步代码示例:
如下: xlinkHref
<svg className="iconfont-xlink" aria-hidden="true">
<use xlinkHref="#hsy-cloud"></use>
</svg>
webpack中的配置如下,需要在入口文件中将 iconfont.js 文件进行引入
entry: {
common: [ 入口文件地址 ]
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin("iconfont.js", "common")
], //此处我引入了插件,将此文件进行单独引入
....
react 通过 xlink 方式引用 iconfont的更多相关文章
- React路由 + 绝对路径引用
路由: 哈希路由(在url地址后加 #name) // 实现页面监听 window.onhashchange = function(){ console.log(‘hash:’,window.lo ...
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- 如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果
如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果
- react之本地图片引用
react之本地图片引用 <img src="../images/photo.png"/> 这种写法在react中是不支持的,所以引用本地图片需要用import或者re ...
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- React使用jquery方式动态获取数据
好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- 微信小程序本地引用iconfont(阿里巴巴矢量图标库)
好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...
- 最正确的React事件绑定方式
参考这篇文章:Choosing the Best Approach for React Event Handlers 1.function.bind()方式 2.inline arrow functi ...
随机推荐
- OI数学汇总
最前面:\(\LaTeX\)可能需要加载一会,请耐心等待o~ 前言 数学在\(\text{OI}\)中十分重要.其中大多都是数论. 什么是数论? \[ 研究整数的理论 --zzq \] 本文包含所有侧 ...
- HDFS-HA高可用集群搭建
HA高可用集群搭建 1.总体集群规划 在hadoop102.hadoop103和hadoop104三个节点上部署Zookeeper. hadoop102 hadoop103 hadoop104 Nam ...
- WPF 程序如何移动焦点到其他控件
原文:WPF 程序如何移动焦点到其他控件 WPF 中可以使用 UIElement.Focus() 将焦点设置到某个特定的控件,也可以使用 TraversalRequest 仅仅移动焦点.本文介绍如何在 ...
- NetCore实例提供的依赖注入的生命周期
Transient: 每一次GetService都会创建一个新的实例,每次从容器 (IServiceProvider)中获取的时候都是一个新的实例Scoped: 在同一个Scope内只初始化一个实例 ...
- java之初识hibernate
1. 使用jdbc进行数据库操作:获取数据库连接,编写sql语句,执行sql操作,关闭连接. 比如:每次创建连接,释放资源----使的执行效率降低: 解决方案:连接池. 编写sql语句动作----简单 ...
- C# vb .net实现羽化效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的羽化效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- 文件系统属性chattr权限
命令格式 chattr [+-=] [选项] 文件名或目录名 + 增加权限 - 删除权限 = 等于某权限 i 如果对文件赋予i权限,那么不允许对文件进行删除.改名,也不能添加.修改数据:如果对目录添加 ...
- k8s集群之上运行etcd集群
一.知识点: 1.headless services NOTE:: 我们在k8s上运行etcd集群,集群间通告身份是使用dns,不能使用pod ip,因为如果pod被重构了ip会变,在这种场景中不能直 ...
- 使用Cloudera Manager搭建Hive服务
使用Cloudera Manager搭建Hive服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装Hive环境 1>.进入CM服务安装向导 2>.选择需要 ...
- ASP.NET 中TextBox设置ReadOnly="true" 无法取到值的做法
当 TextBox设置了ReadOnly="true" 后,要是在前台为控件添加了值,后台是取不到的,值为“空” 原理没想通,说不清楚微软是出于什么考虑的,https://www. ...