@afnexus/hummingbird-ui-assets v1.2.0
Hummingbird UI Assets
Hello there! This is the Hummingbird UI Design System.
This library contains the following assets for the other libraries in the design system:
- Colors
- Fonts
Importing Colors
Import required colors in the following manner:
import { primary, secondary } from '@afnexus/hummingbird-ui-assets'
The available colors are:
primary,
secondary,
neutrals,
green,
red,
yellow,
orange,
purple,
nPrimary,
nSecondary,
nNeutrals,
nGreen,
nRed,
nYellow,
nPurple,
nOrange
Importing Fonts
You will need to import the fonts by referring to the filepath to the font in the @afnexus/hummingbird-ui-assets node module.
Assuming you want to import LatoBlack.ttf
font into your index.js
file, and your folder structure is the following:
my-app/
├─ node_modules/
│ ├─ @afnexus/
│ ├─ hummingbird-ui-assets
│ ├─ dist
│ ├─ fonts
│ ├─ LatoBlack.ttf
│ ├─ ...
├─ src/
│ ├─ index.js
├─ .gitignore
├─ package.json
├─ README.md
In your index.js
file, your import statement would look like this:
import LatoBlack from '../node_modules/@afnexus/hummingbird-ui-assets/dist/fonts/LatoBlack.ttf
Additional Instructions for Developers Using Typescript
If you are using Typescript, you will need to declare .ttf
files as modules to make Typescript recognize the font file types.
- Create a file named
fonts.d.ts
. A good practice is to have atypes
folder in yoursrc
directory, and to store type declarations likefonts.d.ts
there. You should have a file structure similar to the following:
...
├─ src/
│ ├─ index.tsx
│ ├─ types/
│ ├─ fonts.d.ts
...
- In the
fonts.d.ts
file, declare the font file type module with the following statement:
declare module "*.ttf"
Typescript should now recognize the font file type!
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago