github.com/phosphor-icons/webcomponents

v2.1.4+incompatible
Source
Go

Version published: 8 months ago

Created: 10 months ago

Source

@phosphor-icons/webcomponents

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.

Installation

To add Phosphor web components to your app via CDN, you can include the following in the <head> of the document:

<script
  type="module"
  src="https://unpkg.com/@phosphor-icons/webcomponents@2.1"
></script>

To use within ES modules, install the package and import once near the root of your app:

pnpm add @phosphor-icons/webcomponents
#^ Or whatever package manager you use

Then import either just the icons you need, or the entire library (this can be quite large):

import "@phoshpor-icons/webcomponents/PhHorse";
import "@phoshpor-icons/webcomponents/PhHeart";
import "@phoshpor-icons/webcomponents/PhCube";
// OR IF YOU NEED ALL ICONS:
import "@phosphor-icons/webcomponents";

Usage

Add the custom elements to the document, using the ph- prefixed name of the icon as the custom element name:

<body>
  <ph-horse></ph-horse>
  <ph-heart color="crimson" weight="fill"></ph-heart>
  <ph-cube></ph-cube>
</body>

Styling

Icon components can be styled with the following attributes:

color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.
size?: number | string – Icon height & width. This can be a number (defaults to pixels), or a string with units in px, %, em, rem, pt, cm, mm, in.
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" – Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars with weight="regular" to denote an empty star, and weight="fill" to denote a filled star.
mirrored?: boolean – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.

@phosphor-icons/homepage ▲ Phosphor homepage and general info
@phosphor-icons/core ▲ Phosphor icon assets and catalog
@phosphor-icons/react ▲ Phosphor icon component library for React
@phosphor-icons/web ▲ Phosphor icons for Vanilla JS
@phosphor-icons/vue ▲ Phosphor icon component library for Vue
@phosphor-icons/elm ▲ Phosphor icons for Elm
@phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
@phosphor-icons/figma ▲ Phosphor icons Figma plugin
@phosphor-icons/sketch ▲ Phosphor icons Sketch plugin

Community Projects

phosphor-react-native ▲ Phosphor icon component library for React Native
phosphor-svelte ▲ Phosphor icons for Svelte apps
phosphor-r ▲ Phosphor icon wrapper for R documents and applications
blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+

If you've made a port of Phosphor and you want to see it here, just open a PR here!

License

FAQs

What is github.com/phosphor-icons/webcomponents?

Package last updated on 05 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install