The FontAwesome Icon featuring Next.js+TypeScript

Hacking the FontAwesome Library with Nextjs & TypeScript for Custom icon support

1. Overview

Vercel, Nextjs, GraphQL, and Heroku “fac” Icons via Hacked Font Awesome

2. A quick look under the hood

mkdir lib && cd lib && touch fas-custom-integration.ts && cd ..

3. Structure dictates function


4. Dissecting Interfaces of utility

4(a). IconLookup

IconLookup Interface in fontawesome-common-types/index.d.ts

4(b). IconDefinition

IconDefinition Interface in fontawesome-common-types/index.d.ts
Inferred custom icon structure
viewBox structure

5. Translating theory to practice

Imports in ./lib/fas-custom-integration.ts
Vercel SVG
Figma mediated SVG (standardized)
Custom Icon in ./lib/fas-custom-integration.ts
Custom Icon passed to the library in ./lib/fas-custom-integration.ts
Type IconName manipulation in fontawesome-common-types/index.d.ts
Type IconPrefix manipulation in fontawesome-common-types/index.d.ts
./lib/fas-custom-integration.ts Comprehensive

6. Importing to a tsx file to run locally

Imports in ./components/card-icons.tsx
Tsx snippet in ./components/card-icons.tsx
Custom Vercel Icon ▲ Success

7. Priming for production

adding a postinstall script in package.json
generated file in ./patches/@fortawesome+fontawesome-common-types+0.2.30.patch
Custom SVG FontAwesome Icons…Stallions



JAMstack Development Lead at Takeda

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store