Neatly Planned Meal

    svelte-fontawesome

    0.0.3 • Public • Published

    svelte-fontawesome

    FontAwesome icons for Svelte.

    Based on fa-svelte with a few added options. If you only need to show an icon, that library may be a simpler and better choice.

    Getting Started

    The use of the yarn package manager is strongly recommended, as opposed to using npm.

    Add svelte-fontawesome, along with the FontAwesome icon set(s) that you need:

    yarn add -D svelte-fontawesome
    yarn add -D @fortawesome/free-solid-svg-icons

    Usage

    <script>
      import { Icon } from 'svelte-fontawesome';
      import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
    </script>
    
    <Icon icon={faEnvelope}/>
    

    Properties

    prop type about
    class string Add extra classes to the icon
    fw bool Set the icon to a fixed width
    size string Set the icon's size to lg, sm or xs
    stack string Set the icon's stack size (see below)
    inverse bool Set the icon's color to white

    Stacks

    To stack multiple icons, place them within an IconStack. Set the stack property to 1x for the regularly sized icon and 2x for the larger icon. The inverse property can be used to show the smaller icon against the larger one (or vice-versa).

    <script>
      import { IconStack, Icon } from 'svelte-fontawesome';
      import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
      import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
    </script>
    
    <IconStack>
      <Icon icon={faCircle} stack="2x" />
      <Icon icon={faEnvelope} stack="1x" inverse />
    </IconStack>
    

    Classes

    Classes for icon components must be global:

    <style>
      :global(.class1) {
        color: blue;
        font-size: 2em;  /* 2em = 2x, 3em = 3x, etc */
      }
    </style>
    
    <Icon icon={faSearch} class="class1" />
    

    Transforms

    You can use CSS transforms to rotate and flip icons:

    <style>
      :global(.rotate) {
        transform: rotate(90deg);
      }
    
      :global(.flip-v) {
        transform: scale(1,-1);
      }
    
      :global(.flip-h) {
        transform: scale(-1,1);
      }
    
      :global(.flip-both) {
        transform: scale(-1,-1);
      }
    </style>
    

    Keywords

    Install

    npm i svelte-fontawesome

    DownloadsWeekly Downloads

    27

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    35.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • andrewjk