项目中采用 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. K8S conul部署

    官网有Helm方式的安装文档(https://www.consul.io/docs/platform/k8s/index.html) 一,准备工作: 1,k8s环境 2,nfs服务器 二,创建PV n ...

  2. 扩展JS

    //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            var aClass = function(){} //1 定义这个类的静态方法            aC ...

  3. DCL 管理权限

    一个数据库里面有着多个用户,每个用户的权限也不仅相同. 一.查询权限 1.基本语法格式: show grants for '用户名'@'主机名';  2.具体操作 查看 user1 用户的权限 注意: ...

  4. C++线程同步之事件(生产者与消费者问题)

    #include <windows.h> #include <stdio.h> HANDLE g_hSet = NULL; HANDLE g_hClear = NULL; HA ...

  5. 某位前辈的Image识图,,有点意思,先留存

    import PIL from PIL import Image def get_bin_table(threshold=155): ''' 获取灰度转二值的映射table 0表示黑色,1表示白色 ' ...

  6. Android笔记(七十) AlertDialog

    alertdialog可以在当前界面中弹出一个对话框,这个对话框在界面所有元素之上,可以屏蔽掉其他控件的交互能力,因此alertdialog常用于一些重要的内容警告. 使用AlertDialog.Bu ...

  7. three.js展示三维模型

    1.概要 最近学习Three.js,尝试加载一些3d max导出的obj.stl模型,在展示模型的时候遇到了一些问题,模型的尺寸.位置和旋转角度每次都靠手工调整,非常的不方便,就想着写一个方法来随心所 ...

  8. Linux实验:ssh免密码配置

    [实验目的]    1)了解ssh工具的作用    2)熟悉ssh配置过程    3)理解ssh原理[实验原理]    SSH是目前比较可靠的专为远程登录会话和其他网络服务提供安全的协议.不同主机之间 ...

  9. SourceTree&Git -01 -代码拉取推送流程 -提交时的相关注意事项

    1.进行文件的暂存,忽略不提交的文件 防止自己的文件从仓库拉取时被覆盖掉 2.获取,然后从仓库拉取内容 (勾选被合并提交的内容) 先获取,可以防止冲突的发生 3.推送自己暂存的文件 推送失败,请再次进 ...

  10. redis和memcached有什么区别?redis的线程模型是什么?为什么单线程的redis比多线程的memcached效率要高得多(为什么redis是单线程的但是还可以支撑高并发)?

    1.redis和memcached有什么区别? 这个事儿吧,你可以比较出N多个区别来,但是我还是采取redis作者给出的几个比较吧 1)Redis支持服务器端的数据操作:Redis相比Memcache ...