项目中采用 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的更多相关文章

  1. React路由 + 绝对路径引用

    路由: 哈希路由(在url地址后加   #name) // 实现页面监听 window.onhashchange = function(){ console.log(‘hash:’,window.lo ...

  2. React + TypeScript:元素引用的传递

    React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...

  3. 如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

    如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

  4. react之本地图片引用

    react之本地图片引用 <img src="../images/photo.png"/> 这种写法在react中是不支持的,所以引用本地图片需要用import或者re ...

  5. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  6. React使用jquery方式动态获取数据

    好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...

  7. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  8. 微信小程序本地引用iconfont(阿里巴巴矢量图标库)

    好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...

  9. 最正确的React事件绑定方式

    参考这篇文章:Choosing the Best Approach for React Event Handlers 1.function.bind()方式 2.inline arrow functi ...

随机推荐

  1. SpringBoot与整合其他技术

    SpringBoot与整合其他技术 5.1 SpringBoot整合Mybatis 5.1.1 添加Mybatis的起步依赖 <!--mybatis起步依赖--> <dependen ...

  2. Windows Server 2012 R2安装部署Office Web Apps Server

    微软官方参考地址https://technet.microsoft.com/zh-cn/library/jj219455.aspx,建议参考官方说明. 注意:每一步进行完成后重启服务器!!! 一.   ...

  3. MQ相关

    1. 如何保证消息按顺序执行 2. 如何保证消息不重复消费 3. 如何保证消息不丢失 4.RabbitMQ Java Client简单生产者.消费者代码示例

  4. Manjaro 安装笔记

    双系统基本知识 [折腾日记]win10 ,ubuntu双系统安装避坑指南 Windows 下安装 Ubuntu 双系统(更新) rEFInd 总结注意点: 制作U盘启动盘一开始使用的是 Ulrstro ...

  5. 【转载】C#中Add方法将往List集合末尾添加相应元素对象

    在C#的List集合操作中,有时候需要将符合条件的对象添加到已有List集合中的末尾,此时就需要使用到List集合的Add方法,Add方法的作用为将对应的元素添加到List集合末尾,Add方法签名为v ...

  6. 谷歌浏览器解决ajax跨域问题

    在用mui和H5+做混合开发,会利用HBuildx去真机调试,可真机调试总有问题所在,懂得人自然懂,而我们直接打开页面显示的只有一个静态的页面,是获取不到数据的在这里我想说的不是代码中利用jsonp, ...

  7. stage1----航空票务系统需求分析报告

    航空票务管理系统需求分析报告 题    目    航空票务管理系统需求分析报告 学    院       信息科学与工程学院 专    业        计算机科学与技术 组    员         ...

  8. 【cookie的使用】&【Session】

    明确一点:        cookie由服务器创建Cookie cookie=new Cookie("haha","xixi") 通过HtttpServletR ...

  9. 利用.bat脚本使得可运行jar开机自动运行

    1.利用Elipse到处可运行的jar包 2.写.bat脚本[点此下载],相应目录自己根据需要修改即可 3.将此脚本放在"启动"文件夹中

  10. Django异常 - ImportError: No module named django.core.management

    Django错误 - ImportError: No module named django.core.management问题描述:在命令行输入 manage.py runserver,提示找不到d ...