svg图阿⾥字体图标库的使⽤
选择⾸页顶部导航栏⾥⾯的 资源管理 —》 我的项⽬
如果还未创建项⽬，请先创建项⽬，并添加想要的图标
⼀.通过symbol引⼊svg图⽚（vue项⽬或者原⽣框架）
第⼀步：拷贝项⽬下⾯⽣成的symbol代码：
//at.alicdn/t/font_8d5l8fzk5b87iudi.js
第⼆步：加⼊通⽤css代码（引⼊⼀次就⾏）：
<style type="text/css">
.icon {
width:1em; height:1em;
vertical-align:-0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应⽤于页⾯：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
⼆.通过symbol引⼊svg图⽚（react框架)
第⼀步
import { createFromIconfontCN } from '@ant-design/icons';
第⼆步，尽量添上https将地址补全
const IconFont =createFromIconfontCN({
scriptUrl:'at.alicdn/t/font_8d5l8fzk5b87iudi.js',
});
第三步，icon的样式可以⾃⼰视情况进⾏修改，type对应的值就是字体图标库⾥⾯每个图标下⾯对应的字符串名字<IconFont className="icon" type="iconFrame19"></IconFont>
三.通过symbol引⼊svg图⽚（react框架+ umi）
export default defineConfig({
runtimePublicPath: false,
publicPath: baseURL,
history:{
type:'hash',
},
scripts:[
'at.alicdn/t/font_8d5l8fzk5b87iudi.js',
]...})
在需要使⽤图标的地⽅
icon同样可以⾃⼰设置，xlinkHref的值为字体图标对应名称
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-xxx"></use>
</svg>
tips：本⼈亲测失败，失败的同学⽤⽅法⼆，如果⽅法三有成功的同学能留⾔说下吗？嘻嘻

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。