1 antd
使用inconfont.cn中的图标
<template><div class="icons-list"><icon-font type="icon-tuichu" /><icon-font type="icon-facebook" /><icon-font type="icon-twitter" /></div>
</template>
<script>
import { Icon } from 'ant-design-vue';const IconFont = Icon.createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
export default {components: {IconFont,},
};
</script>
注意:
scriptUrl的获取方式:
1 登录iconfont-阿里巴巴矢量图标库
2 找到自己的图标项目
切换到symbol,显示在线链接,点击生成代码
3 生成的代码就是 scriptUrl值了
使用这种方式的优点:
在线,图标项目中的图标更新,前端项目只需要更新scriptUrl值就好,便于维护,不需要将图标下载到本地
2 使用iconfont
需要将图标下载到本地