@iconify/icons-fa-solid

    1.1.1 • Public • Published

    Font Awesome 5 Solid

    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-fa-solid --save-dev

    If you are using Yarn:

    yarn add --dev @iconify/icons-fa-solid

    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 'search-plus' with React

    import { Icon, InlineIcon } from '@iconify/react';
    import searchPlus from '@iconify/icons-fa-solid/search-plus';
    <Icon icon={searchPlus} />
    <p>This is some text with icon adjusted for baseline: <InlineIcon icon={searchPlus} /></p>

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

    Example using icon 'comment-dots' with React

    import React from 'react';
    import { InlineIcon } from '@iconify/react';
    import commentDots from '@iconify/icons-fa-solid/comment-dots';
    
    export function MyComponent() {
    	return (
    		<p>
    			<InlineIcon icon={commentDots} /> 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 'search-plus' with Vue

    This example is using object syntax with TypeScript.

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

    Example using icon 'paste' with Vue

    This example is using string syntax.

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

    Example using icon 'comment-dots' with Vue

    This example is using object syntax.

    <template>
    	<iconify-icon :icon="icons.commentDots" />
    </template>
    
    <script>
    import IconifyIcon from '@iconify/vue';
    import commentDots from '@iconify/icons-fa-solid/comment-dots';
    
    export default {
    	components: {
    		IconifyIcon,
    	},
    	data() {
    		return {
    			icons: {
    				commentDots,
    			},
    		};
    	},
    };
    </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 'search-plus' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-fa-solid
        import IconifyIcon from '@iconify/svelte';
        import searchPlus from '@iconify/icons-fa-solid/search-plus';
    </script>
    
    <IconifyIcon icon={searchPlus} />

    Example using icon 'paste' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-fa-solid
        import IconifyIcon from '@iconify/svelte';
        import pasteIcon from '@iconify/icons-fa-solid/paste';
    </script>
    
    <IconifyIcon icon={pasteIcon} />

    Example using icon 'comment-dots' with Svelte

    <script>
        // npm install --save-dev @iconify/svelte @iconify/icons-fa-solid
        import IconifyIcon from '@iconify/svelte';
        import commentDots from '@iconify/icons-fa-solid/comment-dots';
    </script>
    
    <IconifyIcon icon={commentDots} />

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

    About Font Awesome 5 Solid

    Icons author: Dave Gandy

    Website: http://fontawesome.io/

    License: CC BY 4.0

    License URL: https://creativecommons.org/licenses/by/4.0/

    Keywords

    none

    Install

    npm i @iconify/icons-fa-solid

    DownloadsWeekly Downloads

    2,461

    Version

    1.1.1

    License

    none

    Unpacked Size

    960 kB

    Total Files

    2050

    Last publish

    Collaborators

    • cyberalien