@deriv/quill-icons 2.6.1 → 2.6.3

package/dist/types/index.d.ts

@@ -1,8 +1,13 @@
-import { SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, ImgHTMLAttributes, RefAttributes, SVGProps } from 'react';
 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). */
+export interface QuillIllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
+    title?: string;
+    titleId?: string;
+}
 export declare const IconSizeGuide: readonly [{
     readonly TShirtSize: "xs";
     readonly size: "16";
@@ -34,4 +39,5 @@ interface SVGRProps {
     titleId?: string;
 }
 export type IconTypes = ForwardRefExoticComponent<Omit<QuillSvgProps & SVGRProps, 'ref'> & RefAttributes<SVGSVGElement>>;
+export type QuillIllustrationComponent = ForwardRefExoticComponent<QuillIllustrationProps & RefAttributes<HTMLImageElement>>;
 export {};

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@deriv/quill-icons",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "This is the central repository for quill icons, exported from figma design file",
   "files": [
     "dist"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.png",
+    "**/Illustration/**"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -87,17 +90,18 @@
     "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",
     "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",
     "rexport": "npm-run-all clean export:figma format",
     "export:barrels": "barrelsby -c barrelsby.config.json",
     "export": "npm-run-all clean export:figma allIconsNames export:barrels format",
     "clean:postBuild": "rimraf dist/types dist/index.d.ts dist/index.js",
-    "build": "rimraf dist && npx tsc -p tsconfig.json && cp -R src/react/Illustration/assets dist/react/Illustration/assets",
+    "build": "rimraf dist && npx tsc -p tsconfig.json && tsx ./scripts/copy-illustration-assets.ts",
     "rebuild": "npm-run-all clean export build",
     "lint": "node --max-old-space-size=4096 ./node_modules/.bin/eslint . --cache",
     "lint:fix": "node --max-old-space-size=4096 ./node_modules/.bin/eslint . --cache --fix",
     "format": "prettier --write . --config ./.prettierrc",
-    "allIconsNames": "cd ./src/react && tree -J > allIconsNames.ts && bash -c 'echo -e \"export const allIconsNames = $(cat allIconsNames.ts)\" > allIconsNames.ts'",
+    "allIconsNames": "tsx ./scripts/generate-all-icons-names.ts",
     "prepare": "husky",
     "prepublishOnly": "npm run build"
   },

package/readme.md

@@ -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                                                                                   |
+| 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                                                     |
+| **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,7 +85,19 @@ 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)** — `npm run export:illustrations` fetches original PNG renders from Figma (see `scripts/export-illustrations-png.ts`) into `png/Illustration/` and `src/react/Illustration/assets/`, with thin React wrappers in `src/react/Illustration/`.
+- **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.
+
+Import illustrations as PNG-backed components:
+
+```jsx
+import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration';
+
+<DerivLightWalletIcon width={120} height={120} alt='Wallet' />;
+```
 
 ## Pre-installation
 
@@ -116,12 +128,20 @@ With [@figma-export](https://www.npmjs.com/package/@figma-export/cli) we export
     npm ci
     ```
 
-4.  **Export:**
+4.  **Export** (requires `FIGMA_TOKEN` in `.env`):
 
     ```sh
     npm run export
     ```
 
+    Icons and logos export as optimized SVG React components; illustrations export as PNG assets via `export:illustrations` (included in `export` / `rebuild`).
+
+5.  **Build** (for local publish or linking):
+
+    ```sh
+    npm run build
+    ```
+
 ## Icons Naming Conventions
 
 In the Quill Design System, we utilise naming conventions to store and locate components in their respective groups easily. The naming conventions differ slightly between **Quill Icons**, **Quill Logos** and **Quill Illustrations**. This is to cater specifically to their specific needs.