Introduction
SF Symbols is a library of iconography from Apple, integrated into the San Francisco system fonts.
Installation
Skypack
import { symbols } from "https://cdn.skypack.dev/symbolist"
Yarn
yarn add symbolist
npm
npm install symbolist
Usage
symbols
Import symbols
.
import { symbols } from "symbolist"
// symbols: {"0.circle": "๔ธ", "0.circle.fill": "๔น", ...}
getSymbol
Import getSymbol
.
import { getSymbol } from "symbolist"
Given a symbol name, getSymbol
will return its symbol (or undefined
for unknown symbols).
const symbol = getSymbol("scribble.variable")
// symbol: "๔ค"
getSymbolName
Import getSymbolName
.
import { getSymbolName } from "symbolist"
Given a symbol, getSymbolName
will return its name (or undefined
for unknown symbols).
const name = getSymbolName("๔ฃณ")
// name: "lasso.and.sparkles"
Automation
Symbols are extracted with the generate
commandโusing the SF Symbols app.
Types
generate
prepares types along its symbols which means getSymbol
and getSymbolName
will validate symbol names when using TypeScript.