Notoriously Psychedelic Modules

    @iconify/icons-simple-icons

    1.1.42 • Public • Published

    Simple 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-simple-icons --save-dev

    If you are using Yarn:

    yarn add --dev @iconify/icons-simple-icons

    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 'adobephotoshop' with React

    import { Icon, InlineIcon } from '@iconify/react';
    import adobephotoshopIcon from '@iconify/icons-simple-icons/adobephotoshop';
    <Icon icon={adobephotoshopIcon} />
    <p>This is some text with icon adjusted for baseline: <InlineIcon icon={adobephotoshopIcon} /></p>

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

    Example using icon 'amazonaws' with React

    import React from 'react';
    import { InlineIcon } from '@iconify/react';
    import amazonawsIcon from '@iconify/icons-simple-icons/amazonaws';
    
    export function MyComponent() {
    	return (
    		<p>
    			<InlineIcon icon={amazonawsIcon} /> 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 'adobephotoshop' with Vue

    This example is using object syntax with TypeScript.

    <template>
    	<p>
    		<iconify-icon :icon="icons.adobephotoshop" />
    	</p>
    </template>
    
    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    import IconifyIcon from '@iconify/vue';
    import adobephotoshopIcon from '@iconify/icons-simple-icons/adobephotoshop';
    
    export default Vue.extend({
    	components: {
    		IconifyIcon,
    	},
    	data() {
    		return {
    			icons: {
    				adobephotoshop: adobephotoshopIcon,
    			},
    		};
    	},
    });
    </script>

    Example using icon 'bing' with Vue

    This example is using string syntax.

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

    Example using icon 'amazonaws' with Vue

    This example is using object syntax.

    <template>
    	<iconify-icon :icon="icons.amazonawsIcon" />
    </template>
    
    <script>
    import IconifyIcon from '@iconify/vue';
    import amazonawsIcon from '@iconify/icons-simple-icons/amazonaws';
    
    export default {
    	components: {
    		IconifyIcon,
    	},
    	data() {
    		return {
    			icons: {
    				amazonawsIcon,
    			},
    		};
    	},
    };
    </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 'adobephotoshop' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-simple-icons
        import IconifyIcon from '@iconify/svelte';
        import adobephotoshopIcon from '@iconify/icons-simple-icons/adobephotoshop';
    </script>
    
    <IconifyIcon icon={adobephotoshopIcon} />

    Example using icon 'bing' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-simple-icons
        import IconifyIcon from '@iconify/svelte';
        import bingIcon from '@iconify/icons-simple-icons/bing';
    </script>
    
    <IconifyIcon icon={bingIcon} />

    Example using icon 'amazonaws' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-simple-icons
        import IconifyIcon from '@iconify/svelte';
        import amazonawsIcon from '@iconify/icons-simple-icons/amazonaws';
    </script>
    
    <IconifyIcon icon={amazonawsIcon} />

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

    About Simple Icons

    Icons author: Simple Icons Collaborators

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

    License: CC0 1.0

    License URL: https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md

    Keywords

    none

    Install

    npm i @iconify/icons-simple-icons

    DownloadsWeekly Downloads

    595

    Version

    1.1.42

    License

    none

    Unpacked Size

    3.78 MB

    Total Files

    4316

    Last publish

    Collaborators

    • cyberalien