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 ...
随机推荐
- git重置账号密码
1.打开控制面板(快捷打开win+R,输入control) 2.点击打开用户账户 3.点击凭据管理器 4.点击windows凭据删除你的git凭据即可
- jquery easyui datagrid的一些用法
获取选中的多选数据 var rows = $('#Id').datagri('getSelections'); 选中单行的数据 var row = $(#Id).datagrid('getSelect ...
- wc命令——Linux系统高效数据统计工具
wc(world count)是一个统计文件字词,字节,行数的Linux命令,它可以帮我们非常方便的统计以上信息. 主要参数 常见参数如下: -c 统计字节数. -l 统计行数. -m 统计字符数.这 ...
- ES6- - Map与Set
Map和Set 是 ES6 中新增的一种数据结构.Map为类似于Object的键值对结构,Set为成员唯一的类数组结构.以Map为例介绍两种数据结构的遍历方法.for...of var map = n ...
- 使用sequelize对数据库进行增删改查
由于本人对于命令比较执着,所以基本都是在命令下操作的,喜欢使用命令的可以使用Cmder,需要安装.配置的可以参考这篇文章: https://www.cnblogs.com/ziyoublog/p/10 ...
- element-ui 默认排序
table属性中,设置 :default-sort="{prop:'time', order:'descending'}" 1. prop为排序列,order为排列顺序 2. 多级 ...
- MySQL JOIN 连接时,条件为以逗号分隔的字段与 ID 相匹配
一.背景 有一张相片表,一张相片所属标签表,一张相片可以归属于多个标签,表结构如下: 现在需要通过一次查询,得到每一张照片对应的标签名称,标签名称之间以固定的分隔符连接,结果如下图: 二.查询语句 原 ...
- Python学习文档指引
Python文档资源: 形式 角色 #注释 文件中的文档 dir函数 对象中可用属性的列表 文档字符串:__doc__ 附加在对象上的文件中的文档 PyDoc:help函数 对象的交互帮助 PyDoc ...
- Solr-rce历史漏洞复现
最近Solr又出了一个RCE漏洞,复现了一下 # coding: utf-8 import requestsimport argparsefrom urllib import parse if __n ...
- [C#]DataTable转string[]
来源:https://zhidao.baidu.com/question/1754089856824824548.html string[] ary = Array.ConvertAll<Dat ...