@iconify-icons/jam

Jam 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:

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

If you are using Yarn:

yarn add --dev @iconify-icons/jam

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 'chevrons-square-up-right' with React

import { Icon, InlineIcon } from '@iconify/react';
import chevronsSquareUpRight from '@iconify-icons/jam/chevrons-square-up-right';

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

Example using icon 'luggage-f' 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 luggageF from '@iconify-icons/jam/luggage-f';

addIcon('luggageF', luggageF);

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

Example using icon 'rubber' with React

import React from 'react';
import { InlineIcon } from '@iconify/react';
import rubberIcon from '@iconify-icons/jam/rubber';

export function MyComponent() {
	return (
		<p>
			<InlineIcon icon={rubberIcon} /> 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 'chevrons-square-up-right' with Vue

This example is using object syntax with TypeScript.

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

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import IconifyIcon from '@iconify/vue';
import chevronsSquareUpRight from '@iconify-icons/jam/chevrons-square-up-right';

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

Example using icon 'luggage-f' with Vue

This example is using string syntax.

<template>
	<p>
		Example of 'luggage-f' icon:
		<iconify-icon icon="luggageF" :inline="true" />!
	</p>
</template>

<script>
import IconifyIcon from '@iconify/vue';
import luggageF from '@iconify-icons/jam/luggage-f';

IconifyIcon.addIcon('luggageF', luggageF);

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

Example using icon 'rubber' with Vue

This example is using object syntax.

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

<script>
import IconifyIcon from '@iconify/vue';
import rubberIcon from '@iconify-icons/jam/rubber';

export default {
	components: {
		IconifyIcon,
	},
	data() {
		return {
			icons: {
				rubberIcon,
			},
		};
	},
};
</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 'chevrons-square-up-right' with Svelte

<script>
    // npm install --save-dev @iconify/svelte @iconify-icons/jam
    import IconifyIcon from '@iconify/svelte';
    import chevronsSquareUpRight from '@iconify-icons/jam/chevrons-square-up-right';
</script>

<IconifyIcon icon={chevronsSquareUpRight} />

Example using icon 'luggage-f' with Svelte

<script>
    // npm install --save-dev @iconify/svelte @iconify-icons/jam
    import IconifyIcon from '@iconify/svelte';
    import luggageF from '@iconify-icons/jam/luggage-f';
</script>

<IconifyIcon icon={luggageF} />

Example using icon 'rubber' with Svelte

<script>
    // npm install --save-dev @iconify/svelte @iconify-icons/jam
    import IconifyIcon from '@iconify/svelte';
    import rubberIcon from '@iconify-icons/jam/rubber';
</script>

<IconifyIcon icon={rubberIcon} />

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

About Jam Icons

Icons author: Michael Amprimo

Website: https://github.com/michaelampr/jam

License: MIT

License URL: https://raw.githubusercontent.com/michaelampr/jam/master/LICENSE