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 ...
随机推荐
- C#使用Linq to XML进行XPath查询
最近在用到HtmlAgliltyPack进行结点查询时,发现这里选择结点使用的是XPath.所以这里总结一下在C#中使用XPath查询XML的方法.习惯了用Linq,这里也是用的Linq to xml ...
- Mycat分布式数据库架构解决方案--Mycat的介绍
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 如果我 ...
- DML 操作表中数据
DML 是对于表中的记录进行增删改操作 一.添加数据 语法格式: insert into 表名[字段名] values[字段值] 表名:表示往那张表中添加数据 (字段名1,字段名2, ...
- 忽略警告@SuppressWarnings的用法
@SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码左侧行列的遮挡,有时候这会挡住我们断点调试时打的断点. 我们可以在方法上加上@S ...
- Java网上学习资料
1.今天查找关于代理模式时找到的两个网站:take control with proxy design pattern
- SQL SERVER-修改实例的排序规则
系统库是无法直接修改的,只能修改用户数据库排序规则(要先解决依赖项.如表函数): ALTER DATABASE [xx] COLLATE Chinese_PRC_CI_AS 修改实例的排序规则,使用安 ...
- 使用Cloudera Manager搭建HBase环境
使用Cloudera Manager搭建HBase环境 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用CM安装HBase服务 1>.进入CM服务安装向导 2>. ...
- java请求url可以带参数
/** * * @param urlStr * url * @param content * 提交的参数 * @param encoding * 编码格式 * @return */ public st ...
- bcb中TParamter传NULL值
if (status_Desc.IsEmpty()) Queue_Status->Value = Null(); else Queue_Status->Value = status_Des ...
- 51nod 2486 小b和矩阵
小b有一个m行n列的矩阵. 她会从(1,1)开始,顺时针螺旋访问该矩阵,每个元素恰好被访问一次. 请你按小b的访问顺序输出每个元素. 收起 输入 第一行输入两个数m和n,其中0<m,n≤50 ...