Phosphor Icons Documentation

repository·master·Indexed 27 days ago

https://github.com/phosphor-icons/homepage

A flexible icon family featuring over 1,248 icons across six weights: Thin, Light, Regular, Bold, Fill, and Duotone. Provides specialized integrations for React, Vue, and Vanilla JS, along with utilities for code snippet generation, state management via useApplicationStore, and framework-specific implementations.

Tokens: 2.4K
Snippets: 5
Records: 16
Agent score: 93%

What's inside Phosphor Icons

Use Phosphor Icons in Vue
master
Install @phosphor-icons/vue to use Phosphor icons as Vue components.
Key Features:
- Naming Convention: To avoid namespace collisions with built-in HTML elements, component names are prefixed with Ph (e.g., PhHorse).
- Styling: Customize color, size, and weight via props.
- Global Styles: Use the provide/inject API to provide default styles to all icons.
- Tree-shaking: Fully tree-shakable.
- Template Usage: You can use both PascalCase and kebab-case in your templates.
Available weights for the weight prop: thin, light, regular, bold, fill, and duotone (standardized via props).
```
<template>
  <div>
    <PhHorse />
    <PhHeart :size="32" color="hotpink" weight="fill" />
    <PhCube />
  </div>
</template>

<script>
  import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/vue";
  export default {
    name: "App",
    components: {
      PhHorse,
      PhHeart,
      PhCube,
    },
  };
</script>
```
https://github.com/phosphor-icons/homepage/blob/master/README.md
Use Phosphor Icons in Vanilla Web
master
To use Phosphor Icons in a standard web project, include the required weight stylesheets in your document <head>. You can then display icons using an <i> tag with the base ph class and the specific icon class (e.g., ph-smiley). To change the weight, use the corresponding weight class like ph-fill.
Available weights include: Thin, Light, Regular, Bold, Fill, and Duotone.
Note: The webfont approach uses Unicode's Private Use Area character codes to map icons.
```
<!doctype html>
<html
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
    />
  </head>
  <body>
    <i class="ph ph-smiley"></i>
    <i class="ph-fill ph-heart" style="color: hotpink"></i>
    <i class="ph ph-cube"></i>
  </body>
</html>
```
https://github.com/phosphor-icons/homepage/blob/master/README.md
Use Phosphor Icons in React
master
Install @phosphor-icons/react to use Phosphor icons as React components.
Key Features:
- Styling: Easily customize color, size, and weight via props.
- Tree-shaking: Only the icons you import will be included in your bundle.
- SVG Flexibility: Components are transparent wrappers around SVGs, allowing you to pass standard SVG props like style or onClick.
- Context API: You can provide default styles to all icons using the Context API.
Available weights for the weight prop: thin, light, regular, bold, fill, and duotone (case may vary by implementation, but documentation shows lowercase/standard strings).
```
import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "@phosphor-icons/react";

const App = () => {
  return (
    <div>
      <Smiley />
      <Heart size={32} color="hotpink" weight="fill" />
      <Horse weight="duotone" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
```
https://github.com/phosphor-icons/homepage/blob/master/README.md
Check weight support with supportsWeight
master
Determines if a specific IconStyle weight is supported for a given SnippetType. Currently, the only restriction is that IconStyle.DUOTONE is not supported for the SnippetType.FLUTTER snippet type.
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts
Strip wrapping quotes with stripWrappingQuotes
master
Removes leading and trailing single (') or double (") quotes from a string. Returns an empty string if the input is null or undefined.
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts
Parse icon query with parseQuery
master
A utility to strip wrapping quotes from a query string.
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts
Parse icon weight with parseWeight
master
Converts a string input into a valid IconStyle. It handles wrapping quotes and is case-insensitive.
Supported strings:
- thin -> IconStyle.THIN
- light -> IconStyle.LIGHT
- bold -> IconStyle.BOLD
- fill -> IconStyle.FILL
- duotone -> IconStyle.DUOTONE
- regular (or any unknown value) -> IconStyle.REGULAR
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts
Parse icon color with parseColor
master
Parses a color string into a valid hex string.
- It strips wrapping quotes.
- It defaults to #000000 if the input is invalid or empty.
- It uses tinycolor2 for validation.
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts
Manage application state with useApplicationStore
master
The useApplicationStore hook provides access to the global application state, including icon styling (weight, size, color), search queries, and selection state. It uses Zustand with persistence, meaning certain settings are automatically synchronized with URL search parameters.
Available State Fields
- applicationTheme: ApplicationTheme.LIGHT or ApplicationTheme.DARK.
- searchQuery: The current search string.
- iconWeight: The current IconStyle (e.g., REGULAR, BOLD, etc.).
- iconSize: The current icon size in pixels.
- iconColor: The current icon color in hex format.
- iconPreviewOpen: Whether an icon preview is currently open.
- selectionEntry: The currently selected IconEntry or null.
- filteredQueryResults: An array of IconEntry objects matching the current search.
Available Actions
- setSearchQuery(query: string): Updates the search query and refreshes results.
- setIconWeight(weight: IconStyle): Updates the icon weight.
- setIconSize(size: number): Updates the icon size.
- setIconColor(color: string): Updates the icon color and automatically adjusts the applicationTheme based on color luminance.
- setIconPreviewOpen(open: string | false): Opens or closes the icon preview.
- setSelectionEntry(entry: IconEntry | null): Sets the currently selected icon.
- resetApplicationState(): Resets styling to default values.
https://github.com/phosphor-icons/homepage/blob/master/src/state/index.ts
Parse icon size with parseSize
master
Parses a string into a numeric icon size.
- It strips wrapping quotes.
- It defaults to 32 if the input is invalid or empty.
- It clamps the value between a minimum of 16 and a maximum of 96.
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts
Generate code snippets with getCodeSnippets
master
Use getCodeSnippets to generate multi-framework code snippets (HTML, React, Vue, Flutter, Elm, and Swift) for a specific icon based on its properties like name, weight, size, and color.
Note:
- If the weight is regular or the color is #000000, the corresponding attributes are omitted from the generated snippets to follow default patterns.
- Flutter snippets use a specific Color(0xff...) format.
- Swift snippets use RGB float values.
https://github.com/phosphor-icons/homepage/blob/master/src/utils/index.ts

URL Search Parameter Mapping for Settings

master

The application state is persisted in the URL via the following query parameters. When these parameters are present, the store initializes with their values:

Parameter	State Field	Description
`q`	`searchQuery`	The current search query
`weight`	`iconWeight`	The icon weight (e.g., `regular`, `bold`)
`size`	`iconSize`	The icon size in pixels
`color`	`iconColor`	The icon color (hex value without `#`)

Note: Default values (e.g., weight=regular, size=32, color=000000, or empty q) are stripped from the URL to keep it clean.

Phosphor Icons Documentation

What's inside Phosphor Icons

Available State Fields

Available Actions