@iconify-icons/ph

Phosphor

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:

npm install @iconify-icons/ph --save-dev

If you are using Yarn:

yarn add --dev @iconify-icons/ph

Usage with React

First you need to install Iconify for React.

If you are using NPM:

npm install --save-dev @iconify/react

If you are using Yarn:

yarn add --dev @iconify/react

Example using icon 'folder-notch-open-duotone' with React

import { Icon, InlineIcon } from '@iconify/react';
import folderNotchOpenDuotone from '@iconify-icons/ph/folder-notch-open-duotone';

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

Example using icon 'check-square-offset-thin' 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

import React from 'react';
import { Icon, addIcon } from '@iconify/react';
import checkSquareOffsetThin from '@iconify-icons/ph/check-square-offset-thin';

addIcon('checkSquareOffsetThin', checkSquareOffsetThin);

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

Example using icon 'pencil-line-fill' with React

import React from 'react';
import { InlineIcon } from '@iconify/react';
import pencilLineFill from '@iconify-icons/ph/pencil-line-fill';

export function MyComponent() {
	return (
		<p>
			<InlineIcon icon={pencilLineFill} /> 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.

If you are using NPM:

npm install --save-dev @iconify/vue

If you are using Yarn:

yarn add --dev @iconify/vue

Example using icon 'folder-notch-open-duotone' with Vue

This example is using object syntax with TypeScript.

<template>
	<p>
		<iconify-icon :icon="icons.folderNotchOpenDuotone" />
	</p>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import IconifyIcon from '@iconify/vue';
import folderNotchOpenDuotone from '@iconify-icons/ph/folder-notch-open-duotone';

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

Example using icon 'check-square-offset-thin' with Vue

This example is using string syntax.

<template>
	<p>
		Example of 'check-square-offset-thin' icon:
		<iconify-icon icon="checkSquareOffsetThin" :inline="true" />!
	</p>
</template>

<script>
import IconifyIcon from '@iconify/vue';
import checkSquareOffsetThin from '@iconify-icons/ph/check-square-offset-thin';

IconifyIcon.addIcon('checkSquareOffsetThin', checkSquareOffsetThin);

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

Example using icon 'pencil-line-fill' with Vue

This example is using object syntax.

<template>
	<iconify-icon :icon="icons.pencilLineFill" />
</template>

<script>
import IconifyIcon from '@iconify/vue';
import pencilLineFill from '@iconify-icons/ph/pencil-line-fill';

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

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

Usage with Svelte

First you need to install Iconify for Svelte.

If you are using NPM:

npm install --save-dev @iconify/svelte

If you are using Yarn:

yarn add --dev @iconify/svelte

Example using icon 'folder-notch-open-duotone' with Svelte

<script>
    // npm install --save-dev @iconify/svelte @iconify-icons/ph
    import IconifyIcon from '@iconify/svelte';
    import folderNotchOpenDuotone from '@iconify-icons/ph/folder-notch-open-duotone';
</script>

<IconifyIcon icon={folderNotchOpenDuotone} />

Example using icon 'check-square-offset-thin' with Svelte

<script>
    // npm install --save-dev @iconify/svelte @iconify-icons/ph
    import IconifyIcon from '@iconify/svelte';
    import checkSquareOffsetThin from '@iconify-icons/ph/check-square-offset-thin';
</script>

<IconifyIcon icon={checkSquareOffsetThin} />

Example using icon 'pencil-line-fill' with Svelte

<script>
    // npm install --save-dev @iconify/svelte @iconify-icons/ph
    import IconifyIcon from '@iconify/svelte';
    import pencilLineFill from '@iconify-icons/ph/pencil-line-fill';
</script>

<IconifyIcon icon={pencilLineFill} />

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

About Phosphor

Icons author: Phosphor Icons

Website: https://github.com/phosphor-icons/phosphor-icons

License: MIT