ant-vue中的a-icon使用方法

Ant Design 图标库

直接引入的使用方式

你直接点击相应的图标会自动将图标名称复制到你的剪切板上<step-forward-outlined />

但是你调用的时候<a-icon type="step-forward-outlined"></a-icon>又发现它不显示！对不对

这里有个坑，我们在调用的时候标签要去掉提示词
标签去除Oulined、TwoTone、Filled,首字母小写，后续大写字母转小写并加-

调用改成<a-icon type="step-forward"></a-icon>就可以用了，这里我emo了半天，官方下面文档上没说，这里写给大家避避坑。

更高级的用法

使用的时候可以像官方文档写的一样，通过components传值就可以不用去掉提示词直接用了

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>