build sprite script and common component

d02c2244 · tom · 0f257b42 · d02c2244 · d02c2244 · d02c2244
Commit d02c2244 authored Dec 19, 2023 by tom
11 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,8 @@
 /out/
 /public/assets/
 /public/envs.js
+/public/icons/sprite.svg
+/public/icons/README.md
 /analyze

 # production

--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -265,7 +265,7 @@
        },
        {
            "type": "npm",
-            "script": "format-svg",
+            "script": "svg:format",
            "problemMatcher": [],
            "label": "format svg",
            "detail": "format svg files with svgo",

--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -182,7 +182,8 @@ We have 3 pre-configured projects. You can run your test with the desired projec
 | `yarn lint:eslint` | lint project files with ESLint |
 | `yarn lint:eslint:fix` | lint project files with ESLint and automatically fix problems |
 | `yarn lint:tsc` | compile project typescript files using TypeScript Compiler |
-| `yarn format-svg` | format and optimize SVG icons in the `/icons` folder using SVGO tool |
+| `yarn svg:format` | format and optimize SVG icons in the `/icons` folder using SVGO tool |
+| `yarn svg:build-sprite` | build SVG icons sprite |
 | **Testing** |
 | `yarn test:jest` | run all Jest unit tests |
 | `yarn test:jest:watch` | run all Jest unit tests in watch mode |

--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
    "lint:tsc": "tsc -p ./tsconfig.json",
    "lint:envs-validator:test": "cd ./deploy/tools/envs-validator && ./test.sh",
    "prepare": "husky install",
-    "format-svg": "svgo -r ./icons",
+    "svg:format": "svgo -r ./icons",
+    "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
    "test:pw": "./tools/scripts/pw.sh",
    "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
    "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 @@
    "lint-staged": ">=10",
    "mockdate": "^3.0.5",
    "style-loader": "^3.3.1",
+    "svg-icons-cli": "^0.0.5",
    "svgo": "^2.8.0",
    "ts-jest": "^29.0.3",
    "ts-node": "^10.9.1",

--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import * as serverTiming from 'nextjs/utils/serverTiming';

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

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

--- a/public/icons/name.d.ts
+++ b/public/icons/name.d.ts
+// This file is generated by npm run build:icons
+  
+  export type IconName =
+  	| "ABI"
+	| "API"
+	| "apps"
+	| "arrows/down-right"
+	| "arrows/east-mini"
+	| "arrows/east"
+	| "arrows/north-east"
+	| "arrows/south-east"
+	| "arrows/up-down"
+	| "block_slim"
+	| "block"
+	| "brands/safe"
+	| "burger"
+	| "check"
+	| "clock-light"
+	| "clock"
+	| "coins/bitcoin"
+	| "collection"
+	| "contract_verified"
+	| "contract"
+	| "copy"
+	| "cross"
+	| "delete"
+	| "discussions"
+	| "docs"
+	| "donate"
+	| "edit"
+	| "email-sent"
+	| "email"
+	| "empty_search_result"
+	| "error-pages/404"
+	| "error-pages/422"
+	| "error-pages/429"
+	| "error-pages/500"
+	| "explorer"
+	| "files/csv"
+	| "files/image"
+	| "files/json"
+	| "files/placeholder"
+	| "files/sol"
+	| "files/yul"
+	| "filter"
+	| "finalized"
+	| "flame"
+	| "gas"
+	| "gear"
+	| "globe-b"
+	| "globe"
+	| "graphQL"
+	| "info"
+	| "key"
+	| "link"
+	| "lock"
+	| "minus"
+	| "moon-with-star"
+	| "moon"
+	| "networks"
+	| "networks/icon-placeholder"
+	| "networks/logo-placeholder"
+	| "nft_shield"
+	| "output_roots"
+	| "plus"
+	| "privattags"
+	| "profile"
+	| "publictags_slim"
+	| "publictags"
+	| "qr_code"
+	| "repeat_arrow"
+	| "restAPI"
+	| "rocket"
+	| "RPC"
+	| "scope"
+	| "score/score-not-ok"
+	| "score/score-ok"
+	| "search"
+	| "social/canny"
+	| "social/coingecko"
+	| "social/coinmarketcap"
+	| "social/defi_llama"
+	| "social/discord_filled"
+	| "social/discord"
+	| "social/facebook_filled"
+	| "social/git"
+	| "social/github_filled"
+	| "social/linkedin_filled"
+	| "social/medium_filled"
+	| "social/opensea_filled"
+	| "social/reddit_filled"
+	| "social/slack_filled"
+	| "social/stats"
+	| "social/telega"
+	| "social/telegram_filled"
+	| "social/tweet"
+	| "social/twitter_filled"
+	| "star_filled"
+	| "star_outline"
+	| "stats"
+	| "status/error"
+	| "status/pending"
+	| "status/success"
+	| "status/warning"
+	| "sun"
+	| "testnet"
+	| "token-placeholder"
+	| "token"
+	| "tokens"
+	| "tokens/xdai"
+	| "top-accounts"
+	| "transactions_slim"
+	| "transactions"
+	| "txn_batches_slim"
+	| "txn_batches"
+	| "unfinalized"
+	| "uniswap"
+	| "verified_token"
+	| "verified"
+	| "verify-contract"
+	| "vertical_dots"
+	| "wallet"
+	| "wallets/coinbase"
+	| "wallets/metamask"
+	| "wallets/token-pocket"
+	| "watchlist";
+  
\ No newline at end of file
--- a/svgo.config.js
+++ b/svgo.config.js
 module.exports = {
  plugins: [
-    {
-      name: 'preset-default',
-      params: {
-        overrides: {
-          removeViewBox: false,
-        },
-      },
-    },
+    // TODO @tom2drum pick up plugins from default preset
+    // {
+    //   name: 'preset-default',
+    //   params: {
+    //     overrides: {
+    //       removeViewBox: false,
+    //       cleanupIds: false,
+    //       removeUselessDefs: false,
+    //       collapseGroups: false,
+    //     },
+    //   },
+    // },
    'removeDimensions',
-    'prefixIds',
  ],
  js2svg: {
    indent: 2,

--- a/tools/scripts/dev.preset.sh
+++ b/tools/scripts/dev.preset.sh
@@ -19,6 +19,9 @@ dotenv \
  -e $config_file \
  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'

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

--- a/tools/scripts/dev.sh
+++ b/tools/scripts/dev.sh
@@ -8,6 +8,9 @@ dotenv \
  -e .env \
  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'

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

--- a/ui/shared/IconSvg.tsx
+++ b/ui/shared/IconSvg.tsx
+import { Skeleton, chakra } from '@chakra-ui/react';
+import { type IconName } from 'public/icons/name';
+import React from 'react';
+
+export const href = '/icons/sprite.svg';
+
+interface Props {
+  name: IconName;
+  isLoading?: boolean;
+  className?: string;
+}
+
+const IconSvg = ({ name, isLoading, className }: Props) => {
+  return (
+    <Skeleton isLoaded={ !isLoading } className={ className }>
+      <chakra.svg w="100%" h="100%">
+        <use href={ `${ href }#${ name }` }/>
+      </chakra.svg>
+    </Skeleton>
+  );
+};
+
+export default chakra(IconSvg);
--- a/yarn.lock
+++ b/yarn.lock