ios-symbols
Introduction
SF Symbols is a library of iconography from Apple, integrated into the San Francisco system fonts.
Installation
Skypack
<script type="module">
import { symbols } from "https://cdn.skypack.dev/ios-symbols"
</script>
Yarn
yarn add ios-symbols
npm
npm install ios-symbols
Usage
symbols
Import symbols
.
import { symbols } from "ios-symbols"
// symbols: {"0.circle": "", "0.circle.fill": "", ...}
getSymbol
Import getSymbol
.
import { getSymbol } from "ios-symbols"
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 "ios-symbols"
Given a symbol, getSymbolName
will return its name (or undefined
for unknown symbols).
const name = getSymbolName("")
// name: "lasso.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.