@deriv/quill-icons 2.6.4 → 2.7.1

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export interface QuillSvgProps extends SVGProps<SVGSVGElement> {
     iconSize?: IconSize;
 }
-/** Props for PNG-backed Illustration components (`<img>` wrappers). */
+/** Props for WebP-backed Illustration components (`<img>` wrappers). */
 export interface QuillIllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
     title?: string;
     titleId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv/quill-icons",
-  "version": "2.6.4",
+  "version": "2.7.1",
   "description": "This is the central repository for quill icons, exported from figma design file",
   "files": [
     "dist"
@@ -8,7 +8,6 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
-    "**/*.png",
     "**/Illustration/**"
   ],
   "exports": {
@@ -85,10 +84,11 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "clean": "rimraf stories src/es6 src/react src/index.ts svg png sprite",
+    "clean": "rimraf stories src/es6 src/react src/index.ts svg webp sprite",
     "export:icons": "tsx ./node_modules/@figma-export/cli/bin/run use-config ./scripts/figma.config.ts",
     "export:logos": "tsx ./node_modules/@figma-export/cli/bin/run use-config ./scripts/logo.figma.config.ts",
     "export:illustrations": "tsx ./scripts/export-illustrations-png.ts",
+    "export:illustrations:3d": "tsx ./scripts/reexport-illustration-3d-png.ts",
     "migrate:illustrations:png": "tsx ./scripts/migrate-illustrations-to-png.ts",
     "sync:illustration:components": "tsx ./scripts/sync-illustration-components.ts",
     "export:figma": "npm-run-all export:icons export:logos export:illustrations",
@@ -142,6 +142,7 @@
     "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
     "semantic-release": "^25.0.3",
+    "sharp": "^0.34.5",
     "svgo": "^4.0.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",

package/readme.md

@@ -27,7 +27,7 @@ npm i @deriv/quill-icons
 
 The published package is **ESM-only** (single `dist/` build, no CommonJS `require`). Use `import` in apps or bundlers that resolve the `exports` field.
 
-**Illustration** components render `<img>` tags backed by PNG assets (complex 3D Figma artwork is not converted to SVG). Icons, logos, and other categories remain optimized SVG React components.
+**Illustration** components render `<img>` tags backed by **WebP** assets (Figma PNG renders are converted to WebP; complex 3D artwork is not inlined as SVG). Icons, logos, and other categories remain optimized SVG React components.
 
 **Usage**
 
@@ -43,21 +43,21 @@ const TestComponent = () => (
 
 ## Available Icon Categories
 
-| Category           | Components | Import Path                         | Description                                                                                            |
-| ------------------ | ---------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| **Accounts**       | 22         | `@deriv/quill-icons/Accounts`       | Trading account type icons (DMT5, DXTrade, etc.)                                                       |
-| **Currencies**     | 76         | `@deriv/quill-icons/Currencies`     | Cryptocurrency and fiat currency icons, including multi-chain USDC/USDT variants                       |
-| **Flags**          | 260        | `@deriv/quill-icons/Flags`          | Country flag icons                                                                                     |
-| **Illustration**   | 294        | `@deriv/quill-icons/Illustration`   | Deriv Light theme illustrations (PNG-backed `<img>` components) for onboarding, KYC, wallets, and more |
-| **Illustrative**   | 123        | `@deriv/quill-icons`                | Mid-size illustrative icons                                                                            |
-| **LabelPaired**    | 4,625      | `@deriv/quill-icons/LabelPaired`    | UI icons in 5 sizes (Caption–Xl) × 3 weights (Regular, Bold, Fill) — 329 unique icons                  |
-| **Legacy**         | 326        | `@deriv/quill-icons/Legacy`         | Legacy icon set retained for backward compatibility                                                    |
-| **Logo**           | 641        | `@deriv/quill-icons/Logo`           | Deriv brand, sub-brand, and payment method logos                                                       |
-| **Markets**        | 292        | `@deriv/quill-icons/Markets`        | Financial market and instrument icons                                                                  |
-| **PaymentMethods** | 87         | `@deriv/quill-icons/PaymentMethods` | Payment provider and method icons                                                                      |
-| **Social**         | 32         | `@deriv/quill-icons/Social`         | Social media and platform icons                                                                        |
-| **Standalone**     | 925        | `@deriv/quill-icons/Standalone`     | Scalable UI icons via `iconSize` prop (xs–2xl) — 329 unique icons across Regular, Bold, Fill weights   |
-| **TradeTypes**     | 37         | `@deriv/quill-icons/TradeTypes`     | Trading contract type icons with built-in colors                                                       |
+| Category           | Components | Import Path                         | Description                                                                                             |
+| ------------------ | ---------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| **Accounts**       | 22         | `@deriv/quill-icons/Accounts`       | Trading account type icons (DMT5, DXTrade, etc.)                                                        |
+| **Currencies**     | 76         | `@deriv/quill-icons/Currencies`     | Cryptocurrency and fiat currency icons, including multi-chain USDC/USDT variants                        |
+| **Flags**          | 260        | `@deriv/quill-icons/Flags`          | Country flag icons                                                                                      |
+| **Illustration**   | 294        | `@deriv/quill-icons/Illustration`   | Deriv Light theme illustrations (WebP-backed `<img>` components) for onboarding, KYC, wallets, and more |
+| **Illustrative**   | 123        | `@deriv/quill-icons`                | Mid-size illustrative icons                                                                             |
+| **LabelPaired**    | 4,625      | `@deriv/quill-icons/LabelPaired`    | UI icons in 5 sizes (Caption–Xl) × 3 weights (Regular, Bold, Fill) — 329 unique icons                   |
+| **Legacy**         | 326        | `@deriv/quill-icons/Legacy`         | Legacy icon set retained for backward compatibility                                                     |
+| **Logo**           | 641        | `@deriv/quill-icons/Logo`           | Deriv brand, sub-brand, and payment method logos                                                        |
+| **Markets**        | 292        | `@deriv/quill-icons/Markets`        | Financial market and instrument icons                                                                   |
+| **PaymentMethods** | 87         | `@deriv/quill-icons/PaymentMethods` | Payment provider and method icons                                                                       |
+| **Social**         | 32         | `@deriv/quill-icons/Social`         | Social media and platform icons                                                                         |
+| **Standalone**     | 925        | `@deriv/quill-icons/Standalone`     | Scalable UI icons via `iconSize` prop (xs–2xl) — 329 unique icons across Regular, Bold, Fill weights    |
+| **TradeTypes**     | 37         | `@deriv/quill-icons/TradeTypes`     | Trading contract type icons with built-in colors                                                        |
 
 **Category-scoped imports (recommended for tree-shaking):**
 
@@ -85,13 +85,15 @@ With [@figma-export](https://www.npmjs.com/package/@figma-export/cli) we export
   We use this to generate `SVG` files, you can check them in `svg` folder.
 - [@figma-export/output-components-as-svgr](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/output-components-as-svgr):
   We use this to generate `React` Components based on `transformed (optimized) SVG` files. you can check them in `src/react` folder.
-- **Illustrations (custom PNG pipeline)** — complex 3D Figma artwork is exported as **PNG**, not SVG:
-  - `npm run export:illustrations` — fetches PNG renders from Figma (`scripts/export-illustrations-png.ts`) into `png/Illustration/` and `src/react/Illustration/assets/`, and writes `<img>` React wrappers in `src/react/Illustration/`.
-  - `npm run migrate:illustrations:png` — offline fallback: rasterize existing `svg/Illustration/*.svg` into PNG assets (requires SVG sources on disk).
-  - `npm run sync:illustration:components` — regenerate React wrappers from existing `src/react/Illustration/assets/*.png` without Figma.
-  - `npm run build` copies PNG assets into `dist/react/Illustration/assets/` for publish.
+- `npm run export:icons` and `npm run export:logos` use the SVG/SVGR outputters above — **all icon and logo categories remain SVG React components**.
+- **Illustrations only (custom WebP pipeline)** — the `Illustration` category is excluded from `export:icons` and exported as **WebP** (Figma PNG → WebP via `sharp`), not SVG:
+  - `npm run export:illustrations` — fetches PNG renders from Figma (`scripts/export-illustrations-png.ts`), converts to WebP, writes to `webp/Illustration/` and `src/react/Illustration/assets/`, and writes `<img>` React wrappers in `src/react/Illustration/`.
+  - `npm run export:illustrations:3d` — re-exports account/currency 3D coin icons only (same 1× Figma source size as other illustrations).
+  - `npm run migrate:illustrations:png` — offline fallback: rasterize existing `svg/Illustration/*.svg` into WebP assets (requires SVG sources on disk).
+  - `npm run sync:illustration:components` — regenerate React wrappers from existing `src/react/Illustration/assets/*.webp` without Figma.
+  - `npm run build` copies WebP assets into `dist/react/Illustration/assets/` for publish.
 
-Import illustrations as PNG-backed components:
+Import illustrations as WebP-backed components:
 
 ```jsx
 import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration';
@@ -134,7 +136,7 @@ import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration';
     npm run export
     ```
 
-    Icons and logos export as optimized SVG React components; illustrations export as PNG assets via `export:illustrations` (included in `export` / `rebuild`).
+    Icons and logos export as optimized SVG React components; illustrations export as WebP assets via `export:illustrations` (included in `export` / `rebuild`).
 
 5.  **Build** (for local publish or linking):