@deriv/quill-icons 2.6.2 → 2.6.4

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.2",
+  "version": "2.6.4",
   "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,12 +90,13 @@
     "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",

package/readme.md

@@ -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.