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

最新推荐文章于 2024-06-21 10:59:08 发布

AlbertOS

最新推荐文章于 2024-06-21 10:59:08 发布

阅读量1.9w

点赞数 20

分类专栏：前端文章标签：前端 ant-admin

本文链接：https://blog.csdn.net/Albert_weiku/article/details/124085922

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文档详细介绍了如何正确使用AntDesign图标库，包括直接引入图标的方式和遇到的问题。在调用图标时，需要注意去掉Oulined、TwoTone、Filled等提示词，并转换为小写和短横线格式。同时，提供了通过components属性避免此问题的高级用法，以MessageOutlined为例展示了组件导入和使用的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>