項目中采用 xlink 的方式引用 iconfont 文件,在正常的 html 文件中可以正常引用,但是在 react 下確不可以運行。
經過查找,發現需要更改如下
引入的屬性默認為 xlink-href,在 react 下需要更改為駝峰式命名,即 xlinkHref
另外,如果采用 webpack 打包的方式,需要將 xlink 對應的 js 文件進行引入。
自我更新以及可能會幫助到過來的朋友,特此進行更進一步代碼示例:
如下: xlinkHref
1 <svg className="iconfont-xlink" aria-hidden="true"> 2 <use xlinkHref="#hsy-cloud"></use> 3 </svg>
webpack中的配置如下,需要在入口文件中將 iconfont.js 文件進行引入
1 entry: { 2 common: [ 入口文件地址 ] 3 }, 4 ... 5 6 plugins: [ 7 new webpack.optimize.CommonsChunkPlugin("iconfont.js", "common") 8 ], //此處我引入了插件,將此文件進行單獨引入 9 10 ....