# Ant Design Icons

This package includes individual files for each icon, ready to be imported into a project.

Each icon is in its own file, so you can bundle several icons from different icon sets without bundling entire icon sets.

## Installation

If you are using NPM:

```bash
npm install @iconify/icons-ant-design --save-dev
```

If you are using Yarn:

```bash
yarn add --dev @iconify/icons-ant-design
```

## Usage with React

First you need to install [Iconify for React](https://github.com/iconify/iconify/packages/react).

If you are using NPM:

```bash
npm install --save-dev @iconify/react
```

If you are using Yarn:

```bash
yarn add --dev @iconify/react
```

### Example using icon 'pushpin-filled' with React

```js
import { Icon, InlineIcon } from '@iconify/react';
import pushpinFilled from '@iconify/icons-ant-design/pushpin-filled';
```

```jsx
<Icon icon={pushpinFilled} />
<p>This is some text with icon adjusted for baseline: <InlineIcon icon={pushpinFilled} /></p>
```

### Example using icon 'pie-chart-outlined' with React

This example is using string syntax that is available since Iconify for React 2.0

This example will not work with Iconify for React 1.x

```jsx
import React from 'react';
import { Icon, addIcon } from '@iconify/react';
import pieChartOutlined from '@iconify/icons-ant-design/pie-chart-outlined';

addIcon('pieChartOutlined', pieChartOutlined);

export function MyComponent() {
	return (
		<div>
			<Icon icon="pieChartOutlined" />
		</div>
	);
}
```

### Example using icon 'shopping-twotone' with React

```jsx
import React from 'react';
import { InlineIcon } from '@iconify/react';
import shoppingTwotone from '@iconify/icons-ant-design/shopping-twotone';

export function MyComponent() {
	return (
		<p>
			<InlineIcon icon={shoppingTwotone} /> Sample text with an icon.
		</p>
	);
}
```

See https://github.com/iconify/iconify/packages/react for details.

## Usage with Vue

First you need to install [Iconify for Vue](https://github.com/iconify/iconify/packages/vue).

If you are using NPM:

```bash
npm install --save-dev @iconify/vue
```

If you are using Yarn:

```bash
yarn add --dev @iconify/vue
```

### Example using icon 'pushpin-filled' with Vue

This example is using object syntax with TypeScript.

```vue
<template>
	<p>
		<iconify-icon :icon="icons.pushpinFilled" />
	</p>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import IconifyIcon from '@iconify/vue';
import pushpinFilled from '@iconify/icons-ant-design/pushpin-filled';

export default Vue.extend({
	components: {
		IconifyIcon,
	},
	data() {
		return {
			icons: {
				pushpinFilled: pushpinFilled,
			},
		};
	},
});
</script>
```

### Example using icon 'pie-chart-outlined' with Vue

This example is using string syntax.

```vue
<template>
	<p>
		Example of 'pie-chart-outlined' icon:
		<iconify-icon icon="pieChartOutlined" :inline="true" />!
	</p>
</template>

<script>
import IconifyIcon from '@iconify/vue';
import pieChartOutlined from '@iconify/icons-ant-design/pie-chart-outlined';

IconifyIcon.addIcon('pieChartOutlined', pieChartOutlined);

export default {
	components: {
		IconifyIcon,
	},
};
</script>
```

### Example using icon 'shopping-twotone' with Vue

This example is using object syntax.

```vue
<template>
	<iconify-icon :icon="icons.shoppingTwotone" />
</template>

<script>
import IconifyIcon from '@iconify/vue';
import shoppingTwotone from '@iconify/icons-ant-design/shopping-twotone';

export default {
	components: {
		IconifyIcon,
	},
	data() {
		return {
			icons: {
				shoppingTwotone,
			},
		};
	},
};
</script>
```

See https://github.com/iconify/iconify/packages/vue for details.

## Usage with Svelte

First you need to install [Iconify for Svelte](https://github.com/iconify/iconify/packages/svelte).

If you are using NPM:

```bash
npm install --save-dev @iconify/svelte
```

If you are using Yarn:

```bash
yarn add --dev @iconify/svelte
```

### Example using icon 'pushpin-filled' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-ant-design
    import IconifyIcon from '@iconify/svelte';
    import pushpinFilled from '@iconify/icons-ant-design/pushpin-filled';
</script>

<IconifyIcon icon={pushpinFilled} />
```

### Example using icon 'pie-chart-outlined' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-ant-design
    import IconifyIcon from '@iconify/svelte';
    import pieChartOutlined from '@iconify/icons-ant-design/pie-chart-outlined';
</script>

<IconifyIcon icon={pieChartOutlined} />
```

### Example using icon 'shopping-twotone' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-ant-design
    import IconifyIcon from '@iconify/svelte';
    import shoppingTwotone from '@iconify/icons-ant-design/shopping-twotone';
</script>

<IconifyIcon icon={shoppingTwotone} />
```

See https://github.com/iconify/iconify/packages/svelte for details.

## About Ant Design Icons

Icons author: HeskeyBaozi

Website: https://github.com/ant-design/ant-design-icons

License: MIT