Skip to content

Commit

Permalink
Merge pull request #221 from phosphor-icons/revamp
Browse files Browse the repository at this point in the history 
Revamp
  • Loading branch information
@rektdeckard
rektdeckard authored Mar 8, 2023
2 parents ced8732 + 85af26f commit 675c4fc
Show file tree
Hide file tree
Showing 77 changed files with 1,364 additions and 1,025 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

# production
/build
/dist

# misc
.DS_Store
Expand Down
36 changes: 19 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

- 1047 icons and counting
- 1,248 icons and counting
- 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
- Designed at 16 x 16px to read well small and scale up big
- Raw stroke information retained to fine-tune the style
Expand All @@ -13,36 +13,36 @@ More ways to use at [phosphoricons.com](https://phosphoricons.com).

## For developers

Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phosphor-icons) script, [React package](https://github.com/phosphor-icons/phosphor-react), and [Vue package](https://github.com/phosphor-icons/phosphor-vue), all of which can be sourced from NPM or from a CDN.
Phosphor is available for [web](https://github.com/phosphor-icons/web), [React](https://github.com/phosphor-icons/react), [Vue](https://github.com/phosphor-icons/vue), [Flutter](https://github.com/phosphor-icons/flutter), [Elm](https://github.com/phosphor-icons/phosphor-elm), and other frameworks and platforms.

### HTML/CSS
### Vanilla Web

- **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document `<head>`, and drop in icons with an `<i/>` tag and the appropriate class:

```html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>
<body>
<i class="ph-smiley"></i>
<i class="ph-heart-fill" style="color: hotpink"></i>
<i class="ph-cube-thin"></i>
<i class="ph-fill ph-heart" style="color: hotpink"></i>
<i class="ph-thin ph-cube"></i>
</body>
</html>
```

Check out the full documentation on the [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) repo page.
Check out the full documentation on the [@phosphor-icons/web](https://github.com/phosphor-icons/web) repo page.

### React

- **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [phosphor-react](https://github.com/phosphor-icons/phosphor-react) repo page.
- **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [@phosphor-icons/react](https://github.com/phosphor-icons/react) repo page.

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "phosphor-react";
import { Smiley, Heart, Horse } from "@phosphor-icons/react";

const App = () => {
return (
Expand All @@ -62,7 +62,7 @@ ReactDOM.render(<App />, document.getElementById("root"));

### Vue

- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) repo page.
- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) repo page.

```html
<template>
Expand Down Expand Up @@ -90,13 +90,15 @@ ReactDOM.render(<App />, document.getElementById("root"));
## Our Related Projects

- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React
- [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) ▲ Phosphor icon component library for Vue
- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS
- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter
- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components
- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin
- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin
- [@phosphor-icons/core](https://github.com/phosphor-icons/core) ▲ Phosphor icon assets and catalog
- [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
- [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS
- [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
- [@phosphor-icons/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm
- [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
- [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components
- [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin
- [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin

## Community Projects

Expand Down
93 changes: 0 additions & 93 deletions bin/fetch.js
View file

This file was deleted.

11 changes: 6 additions & 5 deletions public/index.html → index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Phosphor Icons</title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#35313D" />
<meta
Expand Down Expand Up @@ -66,20 +66,20 @@
<meta name="twitter:site" content="@_phosphoricons" />
<meta name="twitter:creator" content="@friedtm" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-192.png" />
<link rel="apple-touch-icon" href="/favicon-192.png" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="%PUBLIC_URL%/favicon-32x32.png"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="%PUBLIC_URL%/favicon-16x16.png"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="/manifest.json" />
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"
rel="stylesheet"
Expand Down Expand Up @@ -112,5 +112,6 @@
</div>
</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
56 changes: 24 additions & 32 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "phosphor-home",
"version": "1.4.0",
"version": "2.0.0",
"license": "MIT",
"homepage": "https://phosphoricons.com",
"author": {
Expand All @@ -18,49 +18,41 @@
"UI",
"UX"
],
"repository": "github:phosphor-icons/phosphor-home",
"repository": "github:phosphor-icons/homepage",
"private": true,
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"fetch": "node ./bin/fetch.js",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\""
},
"dependencies": {
"@phosphor-icons/core": "^1.4.5",
"@phosphor-icons/core": "^2.0.2",
"@phosphor-icons/react": "^2.0.4",
"file-saver": "^2.0.2",
"framer-motion": "^3.10.0",
"framer-motion": "^9.0.1",
"fuse.js": "^6.4.1",
"phosphor-react": "^1.4.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropdown-select": "^4.4.2",
"react-ga": "^3.1.2",
"react-ga4": "^2.0.0",
"react-hotkeys-hook": "^3.2.1",
"react-scripts": "3.4.1",
"react-use": "^15.3.2",
"recoil": "^0.5.2",
"svg2png-converter": "^1.0.0",
"react-use": "^17.4.0",
"recoil": "^0.7.6",
"svg2png-converter": "^1.0.2",
"tinycolor2": "^1.4.2"
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/file-saver": "^2.0.1",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"@types/react-virtualized": "^9.21.10",
"@types/tinycolor2": "^1.4.2",
"axios": "^0.24.0",
"chalk": "^4",
"commander": "^8.3.0",
"typescript": "^3.9.6"
"@types/file-saver": "^2.0.5",
"@types/node": "^18.11.18",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@types/tinycolor2": "^1.4.3",
"@vitejs/plugin-react": "^3.1.0",
"typescript": "^4.9.5",
"vite": "^4.1.1",
"vite-plugin-svgr": "^2.4.0"
},
"eslintConfig": {
"extends": "react-app"
Expand Down
8 changes: 0 additions & 8 deletions src/assets/u-arrow-up-left.svg
View file

This file was deleted.

Loading

0 comments on commit 675c4fc

Please sign in to comment.