当前位置: 首页 > Web前端 > HTML

将阿里图标库渲染成HTML的小工具

时间:2023-04-02 14:51:24 HTML

render.iconfontgithub可以将阿里图标库的icon、svg、unicode渲染成HTML。为什么要使用这个组件?您可以使用这个小工具快速优雅地选择您想要的类型(Unicode、Symbol、Class)来添加您喜欢的图标。如何使用这个小工具?1、我们可以直接点击阿里的“iconfont”下载代码2、找到你下载的代码,添加到你的项目中3、记住你的路径,在你的html上,引入小工具4.在需要图标化的容器中添加data-name,定义类名或id5.实例化小部件newfontIcon({path:'./example',type:'unicode',selector:'.fonticon',className:'icon-custom2'});配置项路径说明:读取图标文件夹的路径类型:String默认值:'./icon/'选择器说明:图标容器默认值:'.fonticon'类型说明:选择文本类型classfont-classreferenceunicodeunicodereferencesvgSymbolreferencetype:String默认值:'class'className描述:customclasssizeforicondescription:class,Widthdescriptionoficonsizereferencedbyunicode:widthoficonreferencedbysymbolheightdescription:heightoficonreferencedbysymbol我们如何选择图标类型?1、font-class引用font-class是Unicode用法的一种变体,主要解决Unicode的书写不直观和语义不明确的问题。与Unicode用法相比,具有以下特点:兼容性好,支持IE8+,以及所有现代浏览器。书写比Unicode更直观,语义清晰。很容易看出这个图标是什么。因为用类来定义图标,所以在替换图标时,只需要修改类中的Unicode引用即可。但是由于本质上还是使用了字体,所以还是不支持多色图标。2.Unicode参考Unicode是字体在网页上最原始的应用方式。其特点是:兼容性最好,支持IE6+,以及所有现代浏览器。支持根据字体动态调整图标大小、颜色等,但因为是字体,不支持多色。平台上只能使用单色图标,即使项目中有多色图标,也会自动去色。注意:新版本的iconfont支持多色图标。这些多色图标在Unicode模式下不可用。如果有需要,建议使用符号引用方式。3、符号引用是一种全新的使用方式。应该说这是未来的主流,也是目前平台推荐的用法。相关介绍请参考本文。这个用法其实就是SVG的集合。与其他两者相比,它有以下特点:支持多色图标,不再受单一颜色的限制。通过一些技巧,支持像字体一样通过font-size和color来调整样式。兼容性差,支持IE9+,以及现代浏览器。浏览器渲染SVG性能一般,不如png。问题是用babel转义的时候,原来代码里有async/await转义,但是报错UncaughtReferenceError:regeneratorRuntimeisnotdefined按照官网安装了regeneratorruntime,但是提示require没有定义,我不想webpack,还有别的办法吗?description部分文字说明及底层代码来自iconfont