phosphor-icons / web Goto Github PK

A flexible icon family for the web

License: MIT License

JavaScript 1.75% HTML 0.06% CSS 97.85% TypeScript 0.34%

icons icon-font svg svg-icons icon-pack

web's Introduction

ATTENTION: As part of a major update, we will be replacing the existing phosphor-icons package with @phosphor-icons/web. We recommend using the new version, as it has improved performance and significantly smaller bundle size, in addition to having the option to only load the weights you need. Some class names and APIs have changed, so please read the documentation before upgrading. The legacy package will continue to recieve maintenance, but will not be updated with new icons upstream. Take me to the legacy version ➜

@phosphor-icons/web

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

Usage

Getting Started

We use a similar approach as many other icon sets out there, providing icons as several webfonts that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. Simply add one or more weights by including its stylesheet to the document <head>, and drop in icons with an <i> tag and the appropriate classes for the weight and the icon:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/bold/style.css"
    />
  </head>
  <body>
    <i class="ph-bold ph-smiley"></i>
    <i class="ph-bold ph-heart" style="color: hotpink"></i>
    <i class="ph-bold ph-cube"></i>
  </body>
</html>

Note

You can import as many or as few weights as needed. Only imported weights will match and render as icons.

Weights

Phosphor Icons come in 6 weights: regular, thin, light, bold, fill, and duotone. In order to use a weight, you must include a link to its stylesheet, and use the appropriate weight class on the icon (the regular weight uses .ph instead of .ph-regular):

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/duotone/style.css"
/>
...
<i class="ph-duotone ph-baseball"></i>

The URL format is https://cdn.jsdelivr.net/npm/@phosphor-icons/web@<VERSION>/src/<WEIGHT>/style.css. Other common CDNs may also be used.

Using All Weights

If you intend to use all 6 weights, they can be made available by including the library as a script tag, using the base URL:

<script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
...
<i class="ph-light ph-address-book"></i>
<i class="ph ph-sunglasses"></i>

Warning

Though assets will be cached for subsequent loads, this will bring in around 3MB of fonts and CSS, and may have impact on page load speed.

Modules

If your environment supports loading CSS files as modules, icon weights can be imported for effect from the package.

$ yarn add @phosphor-icons/web

import "@phosphor-icons/web/light";
import "@phosphor-icons/web/bold";

Styling

Since the icons are just text under the hood, they can be colored and styled with CSS like any other font, including font-size, color, etc.

<style>
  .ph-bold {
    font-size: 48px;
  }

  .green {
    color: limegreen;
  }
</style>
...
<!-- 96px -->
<i class="ph-bold ph-airplane"></i>
<!-- 96px and green -->
<i class="ph-bold ph-skull green"></i>

Warning

Overriding the font-family, font-style, font-weight, font-variant, or text-transform may break the icons and render unprintable characters. Don't do it. Additionally, all weights use the :before pseudoelement to inject the font glyph, so overriding this property in icon classes can break them. The duotone weight also uses the :after pseudoelement, so it is best not to modify either when styling icons.

Our Projects

@phosphor-icons/homepage ▲ Phosphor homepage and general info
@phosphor-icons/core ▲ Phosphor icon assets and catalog
@phosphor-icons/elm ▲ Phosphor icons for Elm
@phosphor-icons/figma ▲ Phosphor icons Figma plugin
@phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
@phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
@phosphor-icons/penpot ▲ Phosphor icons Penpot plugin
@phosphor-icons/react ▲ Phosphor icon component library for React
@phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
@phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
@phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette
@phosphor-icons/unplugin ▲ A multi-framework bundler plugin for generating Phosphor sprite sheets
@phosphor-icons/vue ▲ Phosphor icon component library for Vue
@phosphor-icons/web ▲ Phosphor icons for Vanilla JS
@phosphor-icons/webcomponents ▲ Phosphor icons as Web Components

Community Projects

adamglin0/compose-phosphor-icons ▲ Phosphor icons for Compose Multiplatform
altdsoy/phosphor_icons ▲ Phosphor icons for Phoenix and TailwindCSS
amPerl/egui-phosphor ▲ Phosphor icons for egui apps (Rust)
babakfp/phosphor-icons-svelte ▲ Phosphor icons for Svelte apps
brettkolodny/phosphor-lustre ▲ Phosphor icons for Lustre
cellularmitosis/phosphor-uikit ▲ XCode asset catalog generator for Phosphor icons (Swift/UIKit)
cjohansen/phosphor-clj ▲ Phosphor icons as Hiccup for Clojure and ClojureScript
codeat3/blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
dennym/phosphor_icons_ex ▲ Phosphor icons for Elixir, Phoenix and Ash
dreamRs/phosphor-r ▲ Phosphor icon wrapper for R documents and applications
duongdev/phosphor-react-native ▲ Phosphor icon component library for React Native
haruaki07/phosphor-svelte ▲ Phosphor icons for Svelte apps
IgnaceMaes/ember-phosphor-icons ▲ Phosphor icons for Ember apps
iota-uz/icons ▲ Phosphor icons as Templ components (Go)
jajuma/phosphorhyva ▲ Phosphor icons for Magento 2 & Mage-OS with Hyvä Theme
Kitten ▲ Phosphor icons integrated by default in Kitten
lucagoslar/phosphor-css ▲ CSS wrapper for Phosphor SVG icons
maful/ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
meadowsys/phosphor-svgs ▲ Phosphor icons as Rust string constants
mwood/tamagui-phosphor-icons ▲ Phosphor icons for Tamagui
noozo/phosphoricons_elixir ▲ Phosphor icons as SVG strings for Elixir/Phoenix
oyedejioyewole/nuxt-phosphor-icons ▲ Phosphor icons integration for Nuxt
pepaslabs/phosphor-uikit ▲ Xcode asset catalog generator for Swift/UIKit
raycast/phosphor-icons ▲ Phosphor icons Raycast extension
reatlat/eleventy-plugin-phosphoricons ▲ An Eleventy shortcode plugin to embed icons as inline SVGs
robruiz/wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
sachaw/solid-phosphor ▲ Phosphor icons for SolidJS
SeanMcP/phosphor-astro ▲ Phosphor icons as Astro components
SorenHolstHansen/phosphor-leptos ▲ Phosphor icon component library for Leptos apps (Rust)
vnphanquang/phosphor-icons-tailwindcss ▲ TailwindCSS plugin for Phosphor icons
wireui/phosphoricons ▲ Phosphor icons for Laravel

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

License

MIT © Phosphor Icons

web's People

Contributors

Stargazers

Watchers

Forkers

docoyo lynx570 romedina bdoooh xcv58 dsa-org betawxy webcodermamun frazaao wawacabes icongo iconiclive natalja-andrejeva brunoaires-emergn stoicskyline phuc-propte robruiz leticiabarbosa-dev vampishwolf pablogeokar bradbesserman-at spaceblocks thor10 socologize thatonecalculator brainysteven nathandrussell guihaack jannes-io rjmohammad sakib923 vaimalaviya1233 kavaliersdelikt naveedyassin matheus-rech gensdeconfiance eurekainc

web's Issues

Support React-Native

It would be great, If this package could support React-Native

Update

I'm new to this library and I need the npm code to update to the last version that has been relased yesterday beacause most of my icons are not working. Thanks

separated Font files (ttf) for each weight

Hi, is it possible to get or generate ttf file for each weight of icon sets (regular for my case).
The current TTF file is huge (1MB) and I want to add it to my android app APK. so I prefer to have only one weight.
thank you.

Invalid size in some icons

I guess all icons are supposed to be 256 x 256, but many have slightly different size:

bold/chat-bold: 256.00098 x 256.00098
bold/chat-centered-bold: 256.00098 x 256.00098
bold/chat-centered-dots-bold: 256.00098 x 256.00098
bold/chat-centered-text-bold: 256.00098 x 256.00098
bold/chat-dots-bold: 256.00098 x 256.00098
bold/chat-text-bold: 256.00098 x 256.00098
bold/chats-bold: 256.00098 x 256.00098
bold/copy-bold: 255.99316 x 255.99316
bold/copy-simple-bold: 255.99316 x 255.99316
bold/crop-bold: 255.99316 x 255.99316
bold/eraser-bold: 256.00098 x 256
bold/faders-bold: 256.00098 x 256.00098
bold/gear-bold: 256.00098 x 256.00098
bold/gear-six-bold: 256.00098 x 256.00098
bold/intersect-bold: 256.00098 x 256.00098
bold/magnifying-glass-minus-bold: 256.00098 x 256.00098
bold/magnifying-glass-bold: 256.00098 x 256.00098
bold/magnifying-glass-plus-bold: 256.00098 x 256.00098
bold/phosphor-logo-bold: 256 x 256.00004
bold/sliders-bold: 256.00098 x 256.00098
duotone/chat-centered-duotone: 256.00098 x 256.00098
duotone/chat-centered-dots-duotone: 256.00098 x 256.00098
duotone/chat-centered-text-duotone: 256.00098 x 256.00098
duotone/chat-dots-duotone: 256.00098 x 256.00098
duotone/chat-duotone: 256.00098 x 256.00098
duotone/chat-text-duotone: 256.00098 x 256.00098
duotone/chats-duotone: 256.00098 x 256.00098
duotone/copy-duotone: 255.99316 x 255.99316
duotone/copy-simple-duotone: 255.99316 x 255.99316
duotone/crop-duotone: 255.99316 x 255.99316
duotone/eraser-duotone: 256.00098 x 256
duotone/faders-duotone: 256.00098 x 256.00098
duotone/gear-duotone: 256.00098 x 256.00098
duotone/gear-six-duotone: 256.00098 x 256.00098
duotone/intersect-duotone: 256.00098 x 256.00098
duotone/magnifying-glass-duotone: 256.00098 x 256.00098
duotone/magnifying-glass-minus-duotone: 256.00098 x 256.00098
duotone/magnifying-glass-plus-duotone: 256.00098 x 256.00098
duotone/phosphor-logo-duotone: 256 x 256.00004
duotone/sliders-duotone: 256.00098 x 256.00098
fill/chat-centered-fill: 256.00098 x 256.00098
fill/chat-centered-dots-fill: 256.00098 x 256.00098
fill/chat-centered-text-fill: 256.00098 x 256.00098
fill/chat-dots-fill: 256.00098 x 256.00098
fill/chat-fill: 256.00098 x 256.00098
fill/chat-text-fill: 256.00098 x 256.00098
fill/chats-fill: 256.00098 x 256.00098
fill/copy-fill: 255.99316 x 255.99316
fill/copy-simple-fill: 255.99316 x 255.99316
fill/crop-fill: 255.99316 x 255.99316
fill/eraser-fill: 256.00098 x 256
fill/faders-fill: 256.00098 x 256.00098
fill/gear-fill: 256.00098 x 256.00098
fill/gear-six-fill: 256.00098 x 256.00098
fill/intersect-fill: 256.00098 x 256.00098
fill/magnifying-glass-fill: 256.00098 x 256.00098
fill/magnifying-glass-minus-fill: 256.00098 x 256.00098
fill/magnifying-glass-plus-fill: 256.00098 x 256.00098
fill/phosphor-logo-fill: 256 x 256.00004
fill/sliders-fill: 256.00098 x 256.00098
light/chat-centered-dots-light: 256.00098 x 256.00098
light/chat-centered-light: 256.00098 x 256.00098
light/chat-centered-text-light: 256.00098 x 256.00098
light/chat-dots-light: 256.00098 x 256.00098
light/chat-light: 256.00098 x 256.00098
light/chat-text-light: 256.00098 x 256.00098
light/chats-light: 256.00098 x 256.00098
light/copy-light: 255.99316 x 255.99316
light/copy-simple-light: 255.99316 x 255.99316
light/crop-light: 255.99316 x 255.99316
light/eraser-light: 256.00098 x 256
light/faders-light: 256.00098 x 256.00098
light/gear-light: 256.00098 x 256.00098
light/gear-six-light: 256.00098 x 256.00098
light/intersect-light: 256.00098 x 256.00098
light/magnifying-glass-light: 256.00098 x 256.00098
light/magnifying-glass-minus-light: 256.00098 x 256.00098
light/magnifying-glass-plus-light: 256.00098 x 256.00098
light/phosphor-logo-light: 256 x 256.00004
light/sliders-light: 256.00098 x 256.00098
regular/chat-centered-text: 256.00098 x 256.00098
regular/chat-centered-dots: 256.00098 x 256.00098
regular/chat-centered: 256.00098 x 256.00098
regular/chat-dots: 256.00098 x 256.00098
regular/chat: 256.00098 x 256.00098
regular/chat-text: 256.00098 x 256.00098
regular/chats: 256.00098 x 256.00098
regular/copy-simple: 255.99316 x 255.99316
regular/copy: 255.99316 x 255.99316
regular/crop: 255.99316 x 255.99316
regular/dribbble-logo: 256.01172 x 256
regular/eraser: 256.00098 x 256
regular/faders: 256.00098 x 256.00098
regular/gear-six: 256.00098 x 256.00098
regular/gear: 256.00098 x 256.00098
regular/intersect: 256.00098 x 256.00098
regular/magnifying-glass-minus: 256.00098 x 256.00098
regular/magnifying-glass-plus: 256.00098 x 256.00098
regular/magnifying-glass: 256.00098 x 256.00098
regular/medium-logo: 256.01172 x 256
regular/phosphor-logo: 256 x 256.00004
regular/sliders: 256.00098 x 256.00098
thin/chat-centered-dots-thin: 256.00098 x 256.00098
thin/chat-centered-text-thin: 256.00098 x 256.00098
thin/chat-centered-thin: 256.00098 x 256.00098
thin/chat-dots-thin: 256.00098 x 256.00098
thin/chat-text-thin: 256.00098 x 256.00098
thin/chat-thin: 256.00098 x 256.00098
thin/chats-thin: 256.00098 x 256.00098
thin/copy-thin: 255.99316 x 255.99316
thin/copy-simple-thin: 255.99316 x 255.99316
thin/crop-thin: 255.99316 x 255.99316
thin/eraser-thin: 256.00098 x 256
thin/faders-thin: 256.00098 x 256.00098
thin/gear-six-thin: 256.00098 x 256.00098
thin/gear-thin: 256.00098 x 256.00098
thin/intersect-thin: 256.00098 x 256.00098
thin/magnifying-glass-plus-thin: 256.00098 x 256.00098
thin/magnifying-glass-minus-thin: 256.00098 x 256.00098
thin/magnifying-glass-thin: 256.00098 x 256.00098
thin/phosphor-logo-thin: 256 x 256.00004
thin/sliders-thin: 256.00098 x 256.00098

So looks like there is a bug in SVG export process.

Fill and Duotone Not Working

Hello,

When I try to use the universal script or even the direct CSS, all icons that have fill and duotone do not work but all other weights do. Any ideas?

What happened to extra styles?

Things like ph-lg, ph-fw, etc are all missing :(

`display: inline-flex` removed from icon class in 1.4.0

In 1.4.0 display: inline-flex has been removed from the icon class, which leads to noticable changes in codebases which relied on it being present.

1.3.0:

1.4.0:

ERROR: No loader is configured for ".svg" files

Since upgrading to v2, I'm getting this error:

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@phosphor-icons/web/src/bold/style.css:6:8: ERROR: No loader is configured for ".svg" files: node_modules/@phosphor-icons/web/s
rc/bold/Phosphor-Bold.svg#Phosphor-Bold
    at failureErrorWithLog (/home/user/project/node_modules/esbuild/lib/main.js:1636:15)
    at /home/user/project/node_modules/esbuild/lib/main.js:1048:25
    at /home/user/project/node_modules/esbuild/lib/main.js:1512:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) (x2)

Any advice?

SCSS support

Hello,

in my current project, we would like to use the Phosphor Icons library. Still we don't want to use the CSS classes directly but integrate the icons into our existing classes. For that it would be awesome to have SCSS variables for the unicode characters used by the different icons. Is something like that planned for the near future? Currently, we're using a script extracting the necessary data out of the stylesheet file, but it would be way better to reference the library directly.

Thanks in advance!

Icon not named correctly

Hi i try using icon fonts with 'https://unpkg.com/[email protected]/src/css/icons.css' link at my html.
When i use 'ph-gear-six' view opens calendar icon. Thats not the same icon.
Here are some screenshoot for explain problem.

Link behind npm badge in README is wrong

Link goes to https://www.npmjs.com/package/!phosphor-icons/web instead of https://www.npmjs.com/package/@phosphor-icons/web.

<noscript> support

I try to build my websites as compatible as possible for those who don't use client-side javascript;

I could embed all the SVGs I intend to use independently, but this is a major time consumer.

Feather Icons implements using an svg "sprite sheet" which allows me to embed icons as so:

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/feather-sprite.svg#circle"/>
</svg>

As far as I can tell, phosphor doesn't have a similar SVG available for use - just each icon as an individual file.

I'm curious if such an implementation could be added - or does the Phosphor team have another, more preferred way of embedding these icons script-less? Thanks.

Tailwind plugin

@rektdeckard Would appreciate a tailwind plugin. Something similar to https://github.com/egoist/tailwindcss-icons

I have a personal app that is a non-SPA and serves HTML from the backend using a template engine. This leads to us importing the whole icon CSS without shaking in the link element.

Benefits of the tailwind plugin:

Tailwind generates CSS only for those classes which we use. This means, if we have a plugin, tailwind only adds the icons' CSS which we use (Effectively tree-shaking the CSS) and it reduces the stylesheet size user needs to download.

Documentation's site is no longer available

I can't access the https://phosphoricons.com/ site, it says "sites not found: Well, this is awkward. The site you're looking for is not here."

Some icons miss fill weight when using Phosphor font

Describe the bug
There is a problem when I try to use fill weight for some icons.

To Reproduce

Import Phosphor using the script <script src="https://unpkg.com/phosphor-icons"></script>.
Some icons would not render, for example:
- <i class="ph-text-bolder-fill"></i>
- <i class="ph-text-h-fill"></i>

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser: Chrome
Version: 98.0.4758.102

Additional context
I didn't try to render all the icons. Extensive research and debugging may be needed to find all the icons that don't render when using the Phosphor by the font.

Top indent of the font

All icons have top indent (5px or so) after 2.0 update.

Unable to Render Icons Using Ligatures

I loaded in the Phosphor icons using the unpkg script and am unable to render any icons using ligatures.

I've tested in Firefox, Chrome, and Edge, just to be sure, and they all show the text only, never the icon.
I added an icon using the <i> element and the ph- class to make sure the font was loading, and this appears without issue.

I see a issue from this year that mentions that the author was able to get ligatures working, so I'm a little confused here. Is there anything more I need than what is provided in the example in the README?

My brief HTML test document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="https://unpkg.com/phosphor-icons"></script>
</head>
<body>
    <p style="font-family: Phosphor;">sword-fill</p>
    <i class="ph-cube"></i>
</body>
</html>

And the result is this:

I loaded in the Google Material Icon set to make sure that nothing was misconfigured in the browser somehow, and those ligatures work as they should.