ant-vue中的a-icon使用方法
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>
更多推荐
已为社区贡献1条内容
所有评论(0)