# Ant Design Vue 中使用 icon 图标

Ant-Design-Vue 的 icon 官网

使用前首先要安装组件包：

npm install --save @ant-design/icons-vue

点击对应的图标，会自动将图标名称进行复制

例如关闭：

<CloseOutlined />

但不能直接使用！！！需要将所有大写字母改为小写，删除掉 Oulined、TwoTone、Filled，并且中间 - 拼接 snippets

调整为就可以使用啦。

或者另一种可以直接使用的复制格式：
Ant-design-vue 的 icon 图标
亲测有效！
复制格式：

<a-icon type="close" />

进阶官方文档参考写法：

	<template>
	<snippets-outlined :style="{font-size:'14px', color:'#666'}" />
	</template>
	<script>
	import { SnippetsOutlined } from '@ant-design/icons-vue';
	import { defineComponent } from 'vue';
	export default defineComponent({
	components: {
	SnippetsOutlined,
	},
	});
	</script>

或者我的写法：