qwik-fontawesome

v0.2.0

Published

3 years ago

Use Font Awesome Icons with Qwik

0High
0Medium
0Low

caass

qwik fontawesome qwik-fontawesome

qwik-fontawesome

Use Font Awesome icons with Qwik!

⚠️ THIS IS NOT AN OFFICIAL FONT AWESOME PACKAGE ⚠️

This is a community maintained integration, and as such does not have official support from the Font Awesome or Qwik teams. That being said, please file an issue if you think something's wrong or you'd like a new feature to be added or whatever.

Get Started

Install fontawesome-svg-core and qwik-fontawesome

# or yarn, or pnpm, or whatever
npm i --save @fortawesome/fontawesome-svg-core qwik-fontawesome

Install your icon packages

npm i --save @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
# or, with pro license
npm i --save @fortawesome/pro-solid-svg-icons @fortawesome/pro-regular-svg-icons # ...

Import the FaStylesheet component into your document head somehow. In a Qwik City app, for example:

// root.tsx
import { component$ } from "@builder.io/qwik";
import {
  QwikCityProvider,
  RouterOutlet,
  ServiceWorkerRegister,
} from "@builder.io/qwik-city";
import { RouterHead } from "./components/router-head/router-head";
import { FaStylesheet } from "qwik-fontawesome";

import "./global.css";

export default component$(() => {
  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <link rel="manifest" href="/manifest.json" />
        <RouterHead />
        <FaStylesheet />
      </head>
      <body lang="en">
        <RouterOutlet />
        <ServiceWorkerRegister />
      </body>
    </QwikCityProvider>
  );
});

Use the FaIcon component with impunity! It looks a lot like how it does in React, since it's JSX. Here's a snippet from the component I use to manually test things.

import {
  faBoltLightning,
  faPlus,
  faFontAwesome,
  faEquals,
  faFaceGrinHearts,
} from "@fortawesome/free-solid-svg-icons";
import { component$, useStyles$, $, useSignal } from "@builder.io/qwik";

import { FaIcon, FaStylesheet } from ".";

import "normalize.css/normalize.css";
import "purecss/build/pure.css";

export default component$(() => {
  useStyles$(`
  .reset-links a, a.reset-links {
    text-decoration: none;
    color: inherit;
  }

  .content {
    margin-left: 10%;
    margin-right: 10%;
    justify-content: center;
  }

  .title {
    font-size: 6rem;
    text-align: center;
  }
  
  .fa-color {
    color: #538dd7 !important;
  }

  .qwik-color {
    color: #ac7ef4 !important;
    background-color: white !important;
  }

  .emoji-color {
    color: #ffde34 !important;
  }
  `);

  const faIconShouldShake = useSignal(false);

  return (
    <>
      <head>
        <meta charSet="utf-8" />
        <title>Qwik + Font Awesome</title>
        <FaStylesheet />
      </head>
      <body>
        <div class="pure-g content">
          <h1 class="pure-u-1 reset-links title">
            <a href="https://fontawesome.com/" class="fa-color">
              <FaIcon
                icon={faFontAwesome}
                onMouseEnter$={$(() => {
                  faIconShouldShake.value = true;
                })}
                onMouseLeave$={$(() => {
                  faIconShouldShake.value = false;
                })}
                shake={faIconShouldShake.value}
                fixedWidth
              />
            </a>
            <FaIcon icon={faPlus} fixedWidth />
            <a href="https://qwik.builder.io/" class="qwik-color">
              <FaIcon icon={faBoltLightning} fixedWidth flip="horizontal" />
            </a>
            <FaIcon icon={faEquals} fixedWidth />
            <FaIcon icon={faFaceGrinHearts} fixedWidth class="emoji-color" />
          </h1>
        </div>
      </body>
    </>
  );
});

FAQ

Why can't I use onMouseEnter$ or other qwik props with typescript?
- You can, Qwik just doesn't properly export SVG prop types at the moment so you won't get intellisense or autocompletion. Every prop you pass in to a FaIcon that isn't an explicitly font awesome prop will get forwarded to the underlying SVG.
Why can't I do <thing that i can do in react-fontawesome>?
- No reason! I probably just didn't run into it in my testing. File an issue, or even better submit a PR!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

qwik-fontawesome

⚠️ THIS IS NOT AN OFFICIAL FONT AWESOME PACKAGE ⚠️

Get Started

FAQ