Skip to content

Commit d02c224

Browse files
tom2drumtom2drum
committed
build sprite script and common component
1 parent 0f257b4 commit d02c224

File tree

11 files changed

+442
-26
lines changed

11 files changed

+442
-26
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
/out/
1515
/public/assets/
1616
/public/envs.js
17+
/public/icons/sprite.svg
18+
/public/icons/README.md
1719
/analyze
1820

1921
# production

‎.vscode/tasks.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@
265265
},
266266
{
267267
"type": "npm",
268-
"script": "format-svg",
268+
"script": "svg:format",
269269
"problemMatcher": [],
270270
"label": "format svg",
271271
"detail": "format svg files with svgo",

‎docs/CONTRIBUTING.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,8 @@ We have 3 pre-configured projects. You can run your test with the desired projec
182182
| `yarn lint:eslint` | lint project files with ESLint |
183183
| `yarn lint:eslint:fix` | lint project files with ESLint and automatically fix problems |
184184
| `yarn lint:tsc` | compile project typescript files using TypeScript Compiler |
185-
| `yarn format-svg` | format and optimize SVG icons in the `/icons` folder using SVGO tool |
185+
| `yarn svg:format` | format and optimize SVG icons in the `/icons` folder using SVGO tool |
186+
| `yarn svg:build-sprite` | build SVG icons sprite |
186187
| **Testing** |
187188
| `yarn test:jest` | run all Jest unit tests |
188189
| `yarn test:jest:watch` | run all Jest unit tests in watch mode |

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"lint:tsc": "tsc -p ./tsconfig.json",
2121
"lint:envs-validator:test": "cd ./deploy/tools/envs-validator && ./test.sh",
2222
"prepare": "husky install",
23-
"format-svg": "svgo -r ./icons",
23+
"svg:format": "svgo -r ./icons",
24+
"svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
2425
"test:pw": "./tools/scripts/pw.sh",
2526
"test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
2627
"test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.35.1-focal ./tools/scripts/pw.docker.sh",
@@ -137,6 +138,7 @@
137138
"lint-staged": ">=10",
138139
"mockdate": "^3.0.5",
139140
"style-loader": "^3.3.1",
141+
"svg-icons-cli": "^0.0.5",
140142
"svgo": "^2.8.0",
141143
"ts-jest": "^29.0.3",
142144
"ts-node": "^10.9.1",

‎pages/_document.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import React from 'react';
66
import * as serverTiming from 'nextjs/utils/serverTiming';
77

88
import theme from 'theme';
9+
import * as svgSprite from 'ui/shared/IconSvg';
910

1011
class MyDocument extends Document {
1112
static async getInitialProps(ctx: DocumentContext) {
@@ -48,6 +49,8 @@ class MyDocument extends Document {
4849
<link rel="icon" sizes="16x16" type="image/png"href="/favicon/favicon-16x16.png"/>
4950
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon-180x180.png"/>
5051
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg"/>
52+
53+
<link rel="preload" as="image" href={ svgSprite.href }/>
5154
</Head>
5255
<body>
5356
<ColorModeScript initialColorMode={ theme.config.initialColorMode }/>

‎public/icons/name.d.ts

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
// This file is generated by npm run build:icons
2+
3+
export type IconName =
4+
| "ABI"
5+
| "API"
6+
| "apps"
7+
| "arrows/down-right"
8+
| "arrows/east-mini"
9+
| "arrows/east"
10+
| "arrows/north-east"
11+
| "arrows/south-east"
12+
| "arrows/up-down"
13+
| "block_slim"
14+
| "block"
15+
| "brands/safe"
16+
| "burger"
17+
| "check"
18+
| "clock-light"
19+
| "clock"
20+
| "coins/bitcoin"
21+
| "collection"
22+
| "contract_verified"
23+
| "contract"
24+
| "copy"
25+
| "cross"
26+
| "delete"
27+
| "discussions"
28+
| "docs"
29+
| "donate"
30+
| "edit"
31+
| "email-sent"
32+
| "email"
33+
| "empty_search_result"
34+
| "error-pages/404"
35+
| "error-pages/422"
36+
| "error-pages/429"
37+
| "error-pages/500"
38+
| "explorer"
39+
| "files/csv"
40+
| "files/image"
41+
| "files/json"
42+
| "files/placeholder"
43+
| "files/sol"
44+
| "files/yul"
45+
| "filter"
46+
| "finalized"
47+
| "flame"
48+
| "gas"
49+
| "gear"
50+
| "globe-b"
51+
| "globe"
52+
| "graphQL"
53+
| "info"
54+
| "key"
55+
| "link"
56+
| "lock"
57+
| "minus"
58+
| "moon-with-star"
59+
| "moon"
60+
| "networks"
61+
| "networks/icon-placeholder"
62+
| "networks/logo-placeholder"
63+
| "nft_shield"
64+
| "output_roots"
65+
| "plus"
66+
| "privattags"
67+
| "profile"
68+
| "publictags_slim"
69+
| "publictags"
70+
| "qr_code"
71+
| "repeat_arrow"
72+
| "restAPI"
73+
| "rocket"
74+
| "RPC"
75+
| "scope"
76+
| "score/score-not-ok"
77+
| "score/score-ok"
78+
| "search"
79+
| "social/canny"
80+
| "social/coingecko"
81+
| "social/coinmarketcap"
82+
| "social/defi_llama"
83+
| "social/discord_filled"
84+
| "social/discord"
85+
| "social/facebook_filled"
86+
| "social/git"
87+
| "social/github_filled"
88+
| "social/linkedin_filled"
89+
| "social/medium_filled"
90+
| "social/opensea_filled"
91+
| "social/reddit_filled"
92+
| "social/slack_filled"
93+
| "social/stats"
94+
| "social/telega"
95+
| "social/telegram_filled"
96+
| "social/tweet"
97+
| "social/twitter_filled"
98+
| "star_filled"
99+
| "star_outline"
100+
| "stats"
101+
| "status/error"
102+
| "status/pending"
103+
| "status/success"
104+
| "status/warning"
105+
| "sun"
106+
| "testnet"
107+
| "token-placeholder"
108+
| "token"
109+
| "tokens"
110+
| "tokens/xdai"
111+
| "top-accounts"
112+
| "transactions_slim"
113+
| "transactions"
114+
| "txn_batches_slim"
115+
| "txn_batches"
116+
| "unfinalized"
117+
| "uniswap"
118+
| "verified_token"
119+
| "verified"
120+
| "verify-contract"
121+
| "vertical_dots"
122+
| "wallet"
123+
| "wallets/coinbase"
124+
| "wallets/metamask"
125+
| "wallets/token-pocket"
126+
| "watchlist";
127+

‎svgo.config.js

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
module.exports = {
22
plugins: [
3-
{
4-
name: 'preset-default',
5-
params: {
6-
overrides: {
7-
removeViewBox: false,
8-
},
9-
},
10-
},
3+
// TODO @tom2drum pick up plugins from default preset
4+
// {
5+
// name: 'preset-default',
6+
// params: {
7+
// overrides: {
8+
// removeViewBox: false,
9+
// cleanupIds: false,
10+
// removeUselessDefs: false,
11+
// collapseGroups: false,
12+
// },
13+
// },
14+
// },
1115
'removeDimensions',
12-
'prefixIds',
1316
],
1417
js2svg: {
1518
indent: 2,

‎tools/scripts/dev.preset.sh

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ dotenv \
1919
-e $config_file \
2020
-- bash -c './deploy/scripts/download_assets.sh ./public/assets'
2121

22+
yarn svg:build-sprite
23+
echo ""
24+
2225
# generate envs.js file and run the app
2326
dotenv \
2427
-v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \

‎tools/scripts/dev.sh

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ dotenv \
88
-e .env \
99
-- bash -c './deploy/scripts/download_assets.sh ./public/assets'
1010

11+
yarn svg:build-sprite
12+
echo ""
13+
1114
# generate envs.js file and run the app
1215
dotenv \
1316
-v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \

‎ui/shared/IconSvg.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Skeleton, chakra } from '@chakra-ui/react';
2+
import { type IconName } from 'public/icons/name';
3+
import React from 'react';
4+
5+
export const href = '/icons/sprite.svg';
6+
7+
interface Props {
8+
name: IconName;
9+
isLoading?: boolean;
10+
className?: string;
11+
}
12+
13+
const IconSvg = ({ name, isLoading, className }: Props) => {
14+
return (
15+
<Skeleton isLoaded={ !isLoading } className={ className }>
16+
<chakra.svg w="100%" h="100%">
17+
<use href={ `${ href }#${ name }` }/>
18+
</chakra.svg>
19+
</Skeleton>
20+
);
21+
};
22+
23+
export default chakra(IconSvg);

0 commit comments

Comments
 (0)