@iconify/icons-noto

    1.1.3 • Public • Published

    Noto Emoji

    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-noto --save-dev

    If you are using Yarn:

    yarn add --dev @iconify/icons-noto

    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 'beaming-face-with-smiling-eyes' with React

    import { Icon, InlineIcon } from '@iconify/react';
    import beamingFaceWithSmilingEyes from '@iconify/icons-noto/beaming-face-with-smiling-eyes';
    <Icon icon={beamingFaceWithSmilingEyes} />
    <p>This is some text with icon adjusted for baseline: <InlineIcon icon={beamingFaceWithSmilingEyes} /></p>

    Example using icon 'computer-mouse' 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 computerMouse from '@iconify/icons-noto/computer-mouse';
    
    addIcon('computerMouse', computerMouse);
    
    export function MyComponent() {
    	return (
    		<div>
    			<Icon icon="computerMouse" />
    		</div>
    	);
    }

    Example using icon 'dove' with React

    import React from 'react';
    import { InlineIcon } from '@iconify/react';
    import doveIcon from '@iconify/icons-noto/dove';
    
    export function MyComponent() {
    	return (
    		<p>
    			<InlineIcon icon={doveIcon} /> 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 'beaming-face-with-smiling-eyes' with Vue

    This example is using object syntax with TypeScript.

    <template>
    	<p>
    		<iconify-icon :icon="icons.beamingFaceWithSmilingEyes" />
    	</p>
    </template>
    
    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    import IconifyIcon from '@iconify/vue';
    import beamingFaceWithSmilingEyes from '@iconify/icons-noto/beaming-face-with-smiling-eyes';
    
    export default Vue.extend({
    	components: {
    		IconifyIcon,
    	},
    	data() {
    		return {
    			icons: {
    				beamingFaceWithSmilingEyes: beamingFaceWithSmilingEyes,
    			},
    		};
    	},
    });
    </script>

    Example using icon 'computer-mouse' with Vue

    This example is using string syntax.

    <template>
    	<p>
    		Example of 'computer-mouse' icon:
    		<iconify-icon icon="computerMouse" :inline="true" />!
    	</p>
    </template>
    
    <script>
    import IconifyIcon from '@iconify/vue';
    import computerMouse from '@iconify/icons-noto/computer-mouse';
    
    IconifyIcon.addIcon('computerMouse', computerMouse);
    
    export default {
    	components: {
    		IconifyIcon,
    	},
    };
    </script>

    Example using icon 'dove' with Vue

    This example is using object syntax.

    <template>
    	<iconify-icon :icon="icons.doveIcon" />
    </template>
    
    <script>
    import IconifyIcon from '@iconify/vue';
    import doveIcon from '@iconify/icons-noto/dove';
    
    export default {
    	components: {
    		IconifyIcon,
    	},
    	data() {
    		return {
    			icons: {
    				doveIcon,
    			},
    		};
    	},
    };
    </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 'beaming-face-with-smiling-eyes' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-noto
        import IconifyIcon from '@iconify/svelte';
        import beamingFaceWithSmilingEyes from '@iconify/icons-noto/beaming-face-with-smiling-eyes';
    </script>
    
    <IconifyIcon icon={beamingFaceWithSmilingEyes} />

    Example using icon 'computer-mouse' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-noto
        import IconifyIcon from '@iconify/svelte';
        import computerMouse from '@iconify/icons-noto/computer-mouse';
    </script>
    
    <IconifyIcon icon={computerMouse} />

    Example using icon 'dove' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-noto
        import IconifyIcon from '@iconify/svelte';
        import doveIcon from '@iconify/icons-noto/dove';
    </script>
    
    <IconifyIcon icon={doveIcon} />

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

    About Noto Emoji

    Icons author: Google Inc

    Website: https://github.com/googlei18n/noto-emoji

    License: Apache 2.0

    License URL: https://github.com/googlefonts/noto-emoji/blob/main/LICENSE

    Keywords

    none

    Install

    npm i @iconify/icons-noto

    DownloadsWeekly Downloads

    49

    Version

    1.1.3

    License

    none

    Unpacked Size

    28.4 MB

    Total Files

    7358

    Last publish

    Collaborators

    • cyberalien