前端中图标的使用

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

需要将图标下载到本地