phosphor-icons / core Goto Github PK

License: MIT License

JavaScript 2.36% TypeScript 97.64%

core'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://unpkg.com/@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://unpkg.com/@phosphor-icons/[email protected]/src/duotone/style.css"
/>
...
<i class="ph-duotone ph-baseball"></i>

The URL format is https://unpkg.com/@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://unpkg.com/@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 Related Projects

@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/swift ▲ Phosphor icon component library for SwiftUI
@phosphor-icons/elm ▲ Phosphor icons for Elm
@phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
@phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
@phosphor-icons/figma ▲ Phosphor icons Figma plugin
@phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
@phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
@phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette

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
wireui/phosphoricons ▲ Phosphor icons for Laravel
phosphor-css ▲ CSS wrapper for Phosphor SVG icons
ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
ember-phosphor-icons ▲ Phosphor icons for Ember apps

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

License

MIT © Phosphor Icons

core's People

Contributors

Stargazers

Watchers

core's Issues

Module not found

I'm trying to import SVGs in a Next project with @svgr/webpack loader setup.

import CubeTransparent from '@phosphor-icons/core/regular/cube-transparent.svg';

For some reason I get the following error:

Module not found: 
Package path ./regular/cube-transparent.svg is not exported from package /node_modules/@phosphor-icons/core
(see exports field in /node_modules/@phosphor-icons/core/package.json)

Not exactly sure what is going wrong as I do see the exports in the package.json. No issue when trying to import local SVGs 🤔

set stroke or fill to currentColor

it would be great if the svgs contain stroke=currentColor on the correct places to be able to use css properties to set the color of the icons.

Apple, Google, Discord logos look different than the official logos

While trying to add some logos in a project, I noticed that the Apple, Google and Discord logos look wildly different than the original ones. Is this intentional? The curves, weight, shapes do not match the ones provided by these brands. All of these icons have official SVG brand assets provided for free, wouldn't it be a better idea to use those and add the Phosphor specific features on top of them instead of redrawing all?
(Please ignore the color differences, I just couldn't find a black google logo)

[Feature request] Generate SVG sprites as a build step

(Not sure if this is the right place for feature requests. Feel free to move it somewhere more appropriate)

Motivation

Performance (load times, rendering, memory)

This is a visualization of our current production app bundle (no worries! it's split into multiple chunks in case anyone gets dizzy). There's quite a bit going on. The biggest chunk of node_modules/ is @phosphor-icons which takes up ~300kb of JS, notably (the orange slice). This stems from us using @phosphor-icons/react.

Instead it would be beneficial if all of this could move over here, into the assets/ part of the app, as a static *.svg asset that can be cached by browsers and does not clutter JS bundles more than necessary.

As Jason Miller points out correctly

Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage.

Developer experience

Technically, this is possible today by downloading and using the individual *.svg files instead of relying on @phosphor-icons/react. This comes with a significant decline in developer experience though, some of which is described nicely in The "best" way to manage icons in React.js

SVGs rendered as <img /> cannot be styled using CSS
Without preloading as a <link rel="preload" />, SVGs rendered as <img /> introduce request waterfalls for the initial load. Adding an appropriate preload tag for each icon gets tiring
All of @phosphor-icons/react's benefits such as easily importing any of the icons or changing the icon's weight via nothing more than a prop change becomes way more tedious

The blog's proposed solution is to render SVGs as a sprite

<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol viewBox="0 0 24 24" id="icon-1">
      <!-- svg content here -->
    </symbol>
    <symbol viewBox="0 0 24 24" id="icon-2">
       <!-- svg content here -->
    </symbol>
  </defs>
</svg>

and reference them in a component (taking React as an example)

function Icon({ id, ...props }) {
  return (
    <svg {...props}>
      <use href={`/sprite.svg#${id}`} />
    </svg>
  );
}

This solves both the performance problems as well as 1. (can be styled with CSS) and 2. (only need to preload one file) but still requires manual work to update the SVG sprite by hand each time a new icon is added / the weight is changed / phosphor receives an update where icons are improved/changed.
This can be improved partially by using remix-cli which provides a way to create an SVG sprite by pointing it at a folder containing individual *.svg files. But most of the above still holds true.

Proposed solution

Putting together all of the above, it would be ideal to have a solution that

creates an SVG sprite containing all the actually used phosphor-icons
is as convenient to use as @phosphor-icons/react with (partial?) support of all its features

For this to work, I propose new packages @phosphor-icons/react-sprite and @phosphor-icons/vue-sprite that both offer a <PhosphorIcon /> much like the <Icon /> component above, offering an interface including all the IconProps & { name: "address-book" | "air-traffic-control" | ... }.

On top of that, there'll need to be a build process much like the one of TailwindCSS:
Read the contents of *.[jsx, tsx, vue| files, find all <PhosphorIcon />s and evaluate their props. Based on that, generate a sprite.svg that can be imported in one place.
Unfortunately this comes with a rather major caveat I believe: Just as the tailwind build process, this requires to only put static strings as props since otherwise this cannot be statically analyzed without going through the immense pain of somehow evaluating dynamic code. One alternative I can think of is to offer named components <AddressBookThin />, <AddressBookLight /> and the likes that under the hood all resolve to the same <PhosphorIcon /> for the sole purpose of being able to statically analyze the code for the build process. This still feels kinda meh but all things considered might still be worth it considering the upsides. There may be other ideas I haven't thought of of course.

I understand that this is a passion project built in your guys' free time and something like this isn't done quickly. Just wanted to share some ideas! :)

Sort descending / ascending wrong icon arrow direction

This seems like a bug? Sort descending should clearly point down, and ascending should point up.

bus-fill icon is black and not using currentColor

it seems to be the only icon with this issue