solid-fa

Tiny FontAwesome 5 component for SolidJS

Usage no npm install needed!

<script type="module">
  import solidFa from 'https://cdn.skypack.dev/solid-fa';
</script>

README

solid-fa

npm bundle size npm downloads license

github build coverage

Tiny FontAwesome 5 component for SolidJS.

  • FontAwesome svg icons
  • Tree-shakable, only import used icons
  • No CSS file required
  • FontAwesome layering
  • FontAwesome duotone icons

Installation

npm install solid-fa

Install FontAwesome icons via official packages, for example:

npm install @fortawesome/free-solid-svg-icons

Usage

import Fa from 'solid-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'

function App (props) {
  return <Fa icon={faFlag} />
}

Fa Properties

<Fa
  icon={faFlag}
  size="2x"
  color="#ff0000"
  fw
  pull="left"
  scale={1.2}
  translateX={0.2}
  translateY={0.2}
  rotate={90}
  flip="horizontal"
  spin
  pulse
/>
  • icon: icon from FontAwesome packages, for example: @fortawesome/free-solid-svg-icons
  • size: string values xs, sm, lg or 2x, 3x, 4x, ..., 10x
  • color: string icon color, default currentColor
  • fw: boolean fixed width
  • pull: string values left, right
  • scale: number | string transform scale, unit is em, default 1
  • translateX: number | string transform position X, unit is em, default 0
  • translateY: number | string transform position Y, unit is em, default 0
  • flip: string values horizontal, vertical, both
  • rotate: number | string values 90, 180, 270, 30, -30 ...
  • spin: boolean spin icons
  • pulse: boolean pulse spin icons

Layering & Text

import Fa, {
  FaLayers,
  FaLayersText,
} from 'solid-fa'
import { faCertificate } from '@fortawesome/free-solid-svg-icons'

function App (props) {
  return (
    <FaLayers
      size="4x"
      pull="left"
    >
      <Fa icon={faCertificate} />
      <FaLayersText
        scale={0.25}
        rotate={-30}
        color="white"
        style="font-weight: 900"
      >
        NEW
      </FaLayersText>
    </FaLayers>
  )
}

FaLayers Properties

  • size: string values xs, sm, lg or 2x, 3x, 4x, ..., 10x
  • pull: string values left, right

FaLayersText Properties

  • size: string values xs, sm, lg or 2x, 3x, 4x, ..., 10x
  • color: string icon color, default currentColor
  • scale: number | string transform scale, unit is em, default 1
  • translateX: number | string transform position X, unit is em, default 0
  • translateY: number | string transform position Y, unit is em, default 0
  • flip: string values horizontal, vertical, both
  • rotate: number | string values 90, 180, 270, 30, -30 ...

Duotone Icons

import Fa from 'solid-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'

function App (props) {
  return (
    <Fa
      icon={faFlag}
      primaryColor="red"
      secondaryColor="#000000"
      primaryOpacity={0.8}
      secondaryOpacity={0.6}
      swapOpacity
    />
  )
}

Duotone Icons Theme

import Fa from 'solid-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'

function App (props) {
  const theme = {
    primaryColor: 'red',
    secondaryColor: '#000000',
    primaryOpacity: 0.8,
    secondaryOpacity: 0.6,
  }

  return (
    <Fa
      icon={faFlag}
      {...theme}
    />
  )
}