phosphor-icons / react Goto Github PK

A flexible icon family for React

License: MIT License

HTML 0.01% TypeScript 99.83% CSS 0.02% JavaScript 0.14%

icon-font icon-pack icons react reactjs svg svg-icons

react'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>

NOTE: 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>

Note: 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/react ▲ Phosphor icon component library for React
@phosphor-icons/vue ▲ Phosphor icon component library for Vue
@phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
@phosphor-icons/elm ▲ Phosphor icon library for Elm
@phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
@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

MIT © Phosphor Icons

react's People

Contributors

Stargazers

Watchers

react's Issues

Add `aria-label` in addition to the `alt` prop

Browsers usually display the <title> as a tool tip, but for a11y, shouldn't this also have the ~~aria-labelledby~~ aria-label?

MDN refrence: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

HandWaving icon does not handle `weight="fill"` properly

My code:

<HandWavingIcon size={32} color="#EDC281" weight="fill" />

Results:

By comparison I changed the import to a star and used the same alias (so that we keep the above HTML exactly the same) like so:

import {
  Star as HandWavingIcon,
} from 'phosphor-react';

results:

Error: EMFILE: too many open files

Moving from "phosphor-react" to "@phosphor-icons/react", I've got the following issues when deploying on Vercel in a Nextjs application:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js',
  page: '/guides'
}
RequestId: 2c953896-3cf8-4f3a-8bb0-86de2ca6662c Error: Runtime exited with error: exit status 1
Runtime.ExitError

I'm still using the /pages directory, haven't moved to /app yet in my codebase.

Tried to upgrade my Node server from v16 to v18, no luck.

SidebarSimple is not even used in my code.

Looks like it's bugging when I need to check the auth state with NextAuthjs. So perhaps there's a conflict with the signIn and signOut methodes from this other library, as I can see a lot of similar errors in my logs.

Let me know if I can bring more context.

lib is not exported from package.json

I had trouble with tree shaking with next.js so I had to use

  modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/icons/{{member}}',
    },
}

in my next.config.js to make the tree shaking work, but that broke IconContext because it tried to import it from icons as well.
so I exported it in package.json and now I can import like so:
import { IconContext } from '@phosphor-icons/react/dist/lib/context'

I think the lib inside dist should be exported like the icons.

npm install [email protected] not working

Hi Team,

It seems npm install [email protected] is not working, giving below error.

Can anyone help ?

cc @rektdeckard

Invalid hook call when using in Gutenberg

Trying to use these in a Gutenberg block (new WordPress editor - which is React essentially). Followed instructions on Github.
Getting:
react-dom.min.js?ver=17.0.1:9 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.it (react-dom.min.js?ver=17.0.1:9:43163)
at e.useContext (react.min.js?ver=17.0.1:9:10470)
at Object.render (IconBase.esm.js:15:31)
at X (element.min.js?ver=47162ff4492c7ec4956b:9:6463)
at X (element.min.js?ver=47162ff4492c7ec4956b:9:6459)
at Z (element.min.js?ver=47162ff4492c7ec4956b:9:7257)
at B (element.min.js?ver=47162ff4492c7ec4956b:9:6804)
at X (element.min.js?ver=47162ff4492c7ec4956b:9:6197)
at xr (blocks.min.js?ver=69022aed79bfd45b3b1d:10:4703)
at blocks.min.js?ver=69022aed79bfd45b3b1d:10:33666

import { Horse } from "phosphor-react"; import { useBlockProps } from '@wordpress/block-editor'; export default function Edit() { return ( <div { ...useBlockProps() }> { __( 'Phosphor Icons – hello from the editor!', 'phosphor-icons' ) } <Horse /> </div> ); }
Error only occurs once I add Horse component
Any ideas here?

phosphoricons.com is down

title ^

Title or alt text for svg icons

It is not possible to add title or alt text like in img tags to these icons. E.g. for screen-readers.

Export the SVG files

Is there any way to import the SVGs directly from phosphor-react? I looked in the other Phosphor packages but couldn't find a way. For those using Next.js with SVGR this would allow such usage with dynamic import.

const svg = {
  heart: dynamic<SVGProps<SVGSVGElement>>(() =>
    import('phosphor-react/svgs/heart.svg').then((mod) => mod.ReactComponent)
  ),
  ...
}

const Icon = ({ icon, ...props }) => {
  const Svg = svg[icon];

  return <Svg {...props} />;
};

Refactoring and some suggestions for improvements.

I'll bring modifications for start a PR refac of the exportations in the src/index.ts, because a lot of lines repeat.
a proposal for new name of "GameController" because it more generic and I encountered "Joystick" to fit well in this case and compatible with the visual icon.
at the core\src\icons.ts I think it more comprehensible the legacy icons being presented in the list as such as this example:

 name: "file-dashed",
    pascal_name: "FileDashed",
    legacy: {
      alias_name: "file-dotted",
      pascal_name: "FileDotted",
      changed_in: 2.0,
    },

And the prop changed_in a propose for register knowing when the legacy started (the future we don't know).

And some cases that the icon is published the first time, it's not necessary to fill prop updated_in cause it occurred at the same time this new implementation.

  { ...........,
    published_in: 1.4,
    updated_in: 1.4,
  },

would be only for this case

  { ..........,
    published_in: 1.4,
  },

What do you say about that ? Can assign me for this work ? I almost finished it.

Found this issue when trying to build my library

Hello,
I try using this instead the previous phosphor-react but found an issue It's failing to compile with my project, and had to revert.
seems similar to this issue on vue: phosphor-icons/vue#23

My project is using
react 18
rollup v3

The error

ERROR in ./node_modules/@phosphor-icons/react/dist/lib/IconBase.es.js 25:16
Module parse failed: Unexpected token (25:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ref: i,
|       xmlns: "http://www.w3.org/2000/svg",
>       width: t ?? o,
|       height: t ?? o,
|       fill: s ?? w,
 @ ./node_modules/@phosphor-icons/react/dist/icons/XSquare.es.js 3:0-38 35:52-53
 @ ./node_modules/@phosphor-icons/react/dist/index.es.js
 @ ./stories/timeStone/icons/icons.stories.jsx
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js

"@phosphor-icons/react" was not found in your node_modules. Did you forget to install it?

Could this be the same issue as #41? I would appreciate any guidance on how to resolve this error.

Error message:

The path "@phosphor-icons/react" is imported in app/icons/index.ts but "@phosphor-icons/react" was not found in your node_modules. Did you forget to install it?

I'm using the package in a Remix app
Node version: v18.15.0
My package.json: "@phosphor-icons/react": "^2.0.6"

Export alias/tags for each icons similarly to how the search work in the documentation

I assume that since the search in the Phosphor icon documentation match or more than the name of the icon itself, the information to buidd those tags should already exist somewhere.

Similarly to how we do :

Airplane.displayName = "Airplane";

we could do :

Airplane.tags = ["Airplane","Plane","Fight", ... ];

Use case :

Allowing users in an app to pick an icon for a given primitive. Enabling a search by tag in the front end would be great.
Same in the Figma library, adding those tags to the icon description would make it so much easier to search

bundle size

Hi, I've been using phosphor-react in some projects and I identified some bundle size problems.. Analysing the bundle I could realize that phosport-react is using almost 60% of the space used.

I don't know it's the expected behavior so I opened this issue to report this situation!

Error caused by `exports` field in `package.json`

Describe the bug
Using the latest version of the package (v2.0.4) along with esbuild and Next.js v13 this error pops up in the console when trying to import any icon from the library.

Package path . is not exported from package /my_pc_project_path/node_modules/@phosphor-icons/react (see exports field in /my_pc_project_path/node_modules/@phosphor-icons/react/package.json)

Looking up the path reported I can see this entry

// other stuff...
"exports": {
  ".": {
    "import": "./dist/index.es.js"
  }
},
// more stuff...

To Reproduce
It is quite the hassle, it invlolves setting up a monorepo with Turborepo and creating different apps and packages. If necessary I can provide a link to my repository.

Expected behavior
I expect the app to work without throwing any errors both in developement and production.

Desktop:

OS: Fedora Linux 36 (Workstation Edition)
Browser: Brave
Version: Version 1.48.164 Chromium: 110.0.5481.100 (Official Build) (64-bit)

Add support for server components

With the release of React 18 (and NextJS 13), server components are supported and will most certainly get utilized more going forward. It would be nice of phosphor-react to support this. It does currently seem to be limited by the usage of React.Context.

Possible solutions would be to use the "use client" directive (reactjs/rfcs#227) or in some way make the context optional.

AnimateTransform transform (rotation) does not work in Safari

Have a look at this section of the docs in Chrome where the purple box is rotating.

On Safari, only the opacity animation is working.

React native support?

Is react native supported? If so can we add the integration steps in the documentation.
Usually font icons works on react native using react native vector icons library. But Phosphor icon support is not there yet.

Add modularized imports to the exports field

I was trying to make @phosphor-icons/react work with the new modularized imports feature in Next.js.

It should:

Improve the bundle size
Increase compilation speed thanks to skipping unused files.

I tried adding this configuration to my next.config.js:

const config = {
// ...
  modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/icons/{{member}}',
    },
  },
// ... 
}

Unfortunately, it fails with the following error:

Error: Package subpath './Trash' is not defined by "exports" in /Users/[REDACTED]/node_modules/@phosphor-icons/react/package.json

I was reading through @phosphor-icons/react package.json files and saw that that exports field only allows root import. Adding a new subpath fixed the issue:

{
  "exports": {
    ".": {
      "import": "./dist/index.es.js"
    },
    "./*": {
      "import": "./dist/icons/*.es.js"
    }
  },
}

I suggest adding this path to the exports field to allow users opt-in to the modularized imports if they want. I believe it's generally a good practice to allow this.

use as font

It's possible to use as font? to pass as component parameter without pass as object?

CHANGELOGS

Please implement a CHANGELOG. There are breaking changes happening (export renaming) on minor versions and having to go through commits to figure out why, or if it'll affect someone, is less-than-ideal.

Thank you.

Tree shaking

The whole package will be included when I import any icons from phosphor-react.

Could you please consider supporting tree shaking? Thank you.

Updated icons?

Any idea when we will get the new updated icons?

Support next.js app router/RSC

Since the icons require context to work they fail in a server component.

Adding "use client" to them should fix it, as I didn't manage to get it to work with a custom context...

Create a Phosphor icons array, which can be later on accessed by index in JSX

Hi I'm creating a Slider Component in which I'd like to render some content (phosphor icon included). Slider hook, which I've created, gives me access to the current index at which the slider points. Would it be possible to render an icon by referencing it from icons array with current slider index? I've tried it already, but types do not match Type 'ForwardRefExoticComponent<IconProps & RefAttributes>' is not assignable to type 'ReactNode' . Thank you for your response.