# Eva 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-eva --save-dev
```

If you are using Yarn:

```bash
yarn add --dev @iconify/icons-eva
```

## 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 'droplet-off-outline' with React

```js
import { Icon, InlineIcon } from '@iconify/react';
import dropletOffOutline from '@iconify/icons-eva/droplet-off-outline';
```

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

### Example using icon 'flash-fill' 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 flashFill from '@iconify/icons-eva/flash-fill';

addIcon('flashFill', flashFill);

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

### Example using icon 'printer-outline' with React

```jsx
import React from 'react';
import { InlineIcon } from '@iconify/react';
import printerOutline from '@iconify/icons-eva/printer-outline';

export function MyComponent() {
	return (
		<p>
			<InlineIcon icon={printerOutline} /> 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 'droplet-off-outline' with Vue

This example is using object syntax with TypeScript.

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

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import IconifyIcon from '@iconify/vue';
import dropletOffOutline from '@iconify/icons-eva/droplet-off-outline';

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

### Example using icon 'flash-fill' with Vue

This example is using string syntax.

```vue
<template>
	<p>
		Example of 'flash-fill' icon:
		<iconify-icon icon="flashFill" :inline="true" />!
	</p>
</template>

<script>
import IconifyIcon from '@iconify/vue';
import flashFill from '@iconify/icons-eva/flash-fill';

IconifyIcon.addIcon('flashFill', flashFill);

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

### Example using icon 'printer-outline' with Vue

This example is using object syntax.

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

<script>
import IconifyIcon from '@iconify/vue';
import printerOutline from '@iconify/icons-eva/printer-outline';

export default {
	components: {
		IconifyIcon,
	},
	data() {
		return {
			icons: {
				printerOutline,
			},
		};
	},
};
</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 'droplet-off-outline' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-eva
    import IconifyIcon from '@iconify/svelte';
    import dropletOffOutline from '@iconify/icons-eva/droplet-off-outline';
</script>

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

### Example using icon 'flash-fill' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-eva
    import IconifyIcon from '@iconify/svelte';
    import flashFill from '@iconify/icons-eva/flash-fill';
</script>

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

### Example using icon 'printer-outline' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-eva
    import IconifyIcon from '@iconify/svelte';
    import printerOutline from '@iconify/icons-eva/printer-outline';
</script>

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

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

## About Eva Icons

Icons author: Akveo

Website: https://github.com/akveo/eva-icons/

License: MIT

License URL: https://github.com/akveo/eva-icons/blob/master/LICENSE.txt