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 ...
随机推荐
- ADO.NET 八(一个例子)
可视化方式绑定 DataGridView 控件(写的不详细,结合上一篇) 使用可视化数据绑定方式可以快速完成将数据表中的数据显示在 DataGridView 控件中的操作,并可以很容易地对绑定列的属性 ...
- Swift之xib模块化设计
一.解决问题 Xib/Storybarod可以方便.可视化的设置约束,在开发中也越来越重要.由于Xib不能组件化,使得封装.重用都变得不可行.本文将介绍一种解决方案,来实现Xib组件化. 二.模型块原 ...
- 'adb' 不是内部或外部命令,也不是可运行的程序 或批处理文件—解决方法
Windows键 + R → 输入cmd → 输入adb,提示“adb不是内部或外部命令,也不是可运行的程序 或批处理文件“,错误信息如下: 解决方法: 此电脑(右击)→ 属性 → 高级系统设置 → ...
- Java 之 Stream 流
Stream流 在Java 8中,得益于Lambda所带来的函数式编程,引入了一个全新的Stream概念,用于解决已有集合类库既有的弊端 一.传统遍历 1.传统集合的多步遍历代码 几乎所有的集合(如 ...
- springboot整合tkmybatis
tkmybatis是什么? tkmybatis是为了简化mybatis单表的增删改查而诞生的,极其方便的使用MyBatis单表的增删改查,在使用mybatis单表增删改查时,可以直接调用tkmybat ...
- CRM, C4C和SAP Hybris的数据库层设计
SAP的product都是DB provider无关的. CRM大家都很熟悉了,application developer最多用Open SQL直接操作表. Netweaver里支持的DB provi ...
- 微信支付接口--支付成功的回调--超详细Demo
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 写 ...
- Mybatis,返回Map的时候,将Map内的Key转换为驼峰的命名
每次使用mybatis的时候,简单的连表查询,用Map接收的时候,都是像DB定义的字段一样,类似以下 student_name,student_id,没有转换为驼峰,但是又不能因为这一个定义一个jav ...
- SCADA系统构架的安全分析总结
概念: SCADA 数据采集与监控 Supervisory Control And Data Acquisition .包括了计算机设备 工业控制组件 网络 组成部件 ,SCADA 系统被用 ...
- djangCrm
---恢复内容开始--- 一> 在数据库进行循环取多对多 def get_classlist(self): l=[] for cls in self.class_list.all(): l.ap ...