Skip to content

Commit 675c4fc

Browse files
rektdeckardrektdeckard
authored
Merge pull request #221 from phosphor-icons/revamp
Revamp
2 parents ced8732 + 85af26f commit 675c4fc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+1364
-1025
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
# production
1212
/build
13+
/dist
1314

1415
# misc
1516
.DS_Store

‎README.md

+19-17
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

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

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

1414
## For developers
1515

16-
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.
16+
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.
1717

18-
### HTML/CSS
18+
### Vanilla Web
1919

2020
- **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:
2121

2222
```html
2323
<!DOCTYPE html>
2424
<html>
2525
<head>
26-
<script src="https://unpkg.com/phosphor-icons"></script>
26+
<script src="https://unpkg.com/@phosphor-icons/web"></script>
2727
</head>
2828
<body>
2929
<i class="ph-smiley"></i>
30-
<i class="ph-heart-fill" style="color: hotpink"></i>
31-
<i class="ph-cube-thin"></i>
30+
<i class="ph-fill ph-heart" style="color: hotpink"></i>
31+
<i class="ph-thin ph-cube"></i>
3232
</body>
3333
</html>
3434
```
3535

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

3838
### React
3939

40-
- **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.
40+
- **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.
4141

4242
```jsx
4343
import React from "react";
4444
import ReactDOM from "react-dom";
45-
import { Smiley, Heart, Horse } from "phosphor-react";
45+
import { Smiley, Heart, Horse } from "@phosphor-icons/react";
4646

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

6363
### Vue
6464

65-
- **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.
65+
- **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.
6666

6767
```html
6868
<template>
@@ -90,13 +90,15 @@ ReactDOM.render(<App />, document.getElementById("root"));
9090
9191
## Our Related Projects
9292

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

101103
## Community Projects
102104

‎bin/fetch.js

-93
This file was deleted.

‎public/index.html ‎index.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Phosphor Icons</title>
6-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<link rel="icon" href="/favicon.ico" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#35313D" />
99
<meta
@@ -66,20 +66,20 @@
6666
<meta name="twitter:site" content="@_phosphoricons" />
6767
<meta name="twitter:creator" content="@friedtm" />
6868

69-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-192.png" />
69+
<link rel="apple-touch-icon" href="/favicon-192.png" />
7070
<link
7171
rel="icon"
7272
type="image/png"
7373
sizes="32x32"
74-
href="%PUBLIC_URL%/favicon-32x32.png"
74+
href="/favicon-32x32.png"
7575
/>
7676
<link
7777
rel="icon"
7878
type="image/png"
7979
sizes="16x16"
80-
href="%PUBLIC_URL%/favicon-16x16.png"
80+
href="/favicon-16x16.png"
8181
/>
82-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
82+
<link rel="manifest" href="/manifest.json" />
8383
<link
8484
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"
8585
rel="stylesheet"
@@ -112,5 +112,6 @@
112112
</div>
113113
</noscript>
114114
<div id="root"></div>
115+
<script type="module" src="/src/index.tsx"></script>
115116
</body>
116117
</html>

‎package.json

+24-32
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "phosphor-home",
3-
"version": "1.4.0",
3+
"version": "2.0.0",
44
"license": "MIT",
55
"homepage": "https://phosphoricons.com",
66
"author": {
@@ -18,49 +18,41 @@
1818
"UI",
1919
"UX"
2020
],
21-
"repository": "github:phosphor-icons/phosphor-home",
21+
"repository": "github:phosphor-icons/homepage",
2222
"private": true,
2323
"scripts": {
24-
"analyze": "source-map-explorer 'build/static/js/*.js'",
25-
"start": "react-scripts start",
26-
"build": "react-scripts build",
27-
"test": "react-scripts test",
28-
"eject": "react-scripts eject",
29-
"fetch": "node ./bin/fetch.js",
24+
"dev": "vite",
25+
"build": "tsc && vite build",
26+
"preview": "vite preview",
3027
"format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\""
3128
},
3229
"dependencies": {
33-
"@phosphor-icons/core": "^1.4.5",
30+
"@phosphor-icons/core": "^2.0.2",
31+
"@phosphor-icons/react": "^2.0.4",
3432
"file-saver": "^2.0.2",
35-
"framer-motion": "^3.10.0",
33+
"framer-motion": "^9.0.1",
3634
"fuse.js": "^6.4.1",
37-
"phosphor-react": "^1.4.0",
38-
"react": "^17.0.1",
39-
"react-dom": "^17.0.1",
35+
"prop-types": "^15.8.1",
36+
"react": "^18.2.0",
37+
"react-dom": "^18.2.0",
4038
"react-dropdown-select": "^4.4.2",
41-
"react-ga": "^3.1.2",
39+
"react-ga4": "^2.0.0",
4240
"react-hotkeys-hook": "^3.2.1",
43-
"react-scripts": "3.4.1",
44-
"react-use": "^15.3.2",
45-
"recoil": "^0.5.2",
46-
"svg2png-converter": "^1.0.0",
41+
"react-use": "^17.4.0",
42+
"recoil": "^0.7.6",
43+
"svg2png-converter": "^1.0.2",
4744
"tinycolor2": "^1.4.2"
4845
},
4946
"devDependencies": {
50-
"@testing-library/jest-dom": "^4.2.4",
51-
"@testing-library/react": "^9.3.2",
52-
"@testing-library/user-event": "^7.1.2",
53-
"@types/file-saver": "^2.0.1",
54-
"@types/jest": "^24.0.0",
55-
"@types/node": "^12.0.0",
56-
"@types/react": "^16.9.46",
57-
"@types/react-dom": "^16.9.8",
58-
"@types/react-virtualized": "^9.21.10",
59-
"@types/tinycolor2": "^1.4.2",
60-
"axios": "^0.24.0",
61-
"chalk": "^4",
62-
"commander": "^8.3.0",
63-
"typescript": "^3.9.6"
47+
"@types/file-saver": "^2.0.5",
48+
"@types/node": "^18.11.18",
49+
"@types/react": "^18.0.27",
50+
"@types/react-dom": "^18.0.10",
51+
"@types/tinycolor2": "^1.4.3",
52+
"@vitejs/plugin-react": "^3.1.0",
53+
"typescript": "^4.9.5",
54+
"vite": "^4.1.1",
55+
"vite-plugin-svgr": "^2.4.0"
6456
},
6557
"eslintConfig": {
6658
"extends": "react-app"

‎src/assets/u-arrow-up-left.svg

-8
This file was deleted.

0 commit comments

Comments
 (0)