JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 301
  • Score
    100M100P100Q88581F
  • License MIT

Tiny FontAwesome 5 component for SolidJS

Package Exports

  • solid-fa

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (solid-fa) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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}
    />
  )
}