@deriv/quill-icons 1.17.6 → 1.17.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv/quill-icons",
-  "version": "1.17.6",
+  "version": "1.17.8",
   "description": "This is the central repository for quill icons, exported from figma design file",
   "files": [
     "dist"

package/readme.md

@@ -1,6 +1,47 @@
-## Deriv Icons
+<img src="./svg/Logo/LogoBrandDerivLogoCoral.svg" alt="Deriv Quill Icons">
 
-This project will export SVG, Sprite, React Components from a simple Figma Icon project.
+# [Deriv Quill Icons](https://quill-icons-park.pages.dev/)
+
+[npm-image]: https://img.shields.io/npm/v/@deriv/quill-icons.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@deriv/quill-icons
+
+[![npm][npm-image]][npm-url]
+
+Explore and integrate the complete set of icons from [Deriv](https://deriv.com/) with easy-to-use React components. These icons are exported from a Figma Icon project.
+
+## The motivation of creating this library
+
+We developed the Deriv Quill Icons library to address several critical considerations across our projects:
+
+1. **Consistency across all of our projects:** By creating Deriv Quill Icons we ensure a consistent design language across all of our applications. All icons will have a similar style, size, and color.
+2. **Easy Maintenance:** Managing all of the icons in a centralised library makes it easier to update or modify them. If we decide to change the design or add new icons, we only need to make changes in one place, and the updates will be reflected throughout all of our applications.
+3. **Reuse and Efficiency:** We can easily reuse the same set of icons across different components and pages in our applications. This promotes code reusability and reduces redundancy, as we don't have to duplicate icon assets or styles.
+4. **Customisation:** It allows us to customise our icons globally. For example, we can change the color scheme, size, or other visual aspects of all icons in one place without modifying individual components. Also we can easily apply optimisations to all of our icons in one place.
+5. **Developer Productivity:** It enhances our developer productivity. Developers can easily find and use the icons they need without having to search for or create new assets each time.
+
+and ...
+
+## Installation
+
+```bash
+npm i @deriv/quill-icons
+```
+
+**Usage**
+
+```jsx
+import { CurrencyAlgoIcon } from '@deriv/quill-icons';
+
+const TestComponent = () => (
+  <h3>
+    Lets go for a <CurrencyAlgoIcon />?
+  </h3>
+);
+```
+
+<hr />
+
+# Contribution Guidelines
 
 ## Prerequisite
 
@@ -8,38 +49,36 @@ We use [@figma-export](https://www.npmjs.com/package/@figma-export/cli) to expor
 
 With [@figma-export](https://www.npmjs.com/package/@figma-export/cli) we export to handle `SVG` creation for each `Figma Component` and then with [transform-svg-with-svgo](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/transform-svg-with-svgo) we optimize the exported `SVG`s. this is a transformer and you can add/remove/update `SVG` attributes with it.
 
-## Out Putters
+## Outputters
 
-- [@figma-export/output-components-as-svg](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/output-components-as-svg)
+- [@figma-export/output-components-as-svg](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/output-components-as-svg):
   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.
+- [@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.
 
 ## Pre-installation
 
 - node >=16.16.0
 - npm >=7.21.0
 - git (for `contribution`)
-- Figma Token ( Check [This](https://www.figma.com/developers/api#authentication) to set it up for yourself )
-- Figma File Id, for now you can use `XegjSl9fWXH2O7Mxo0Ctie`
-- Figma icons page, for now you can use `deriv-icons`
+- Figma Token (Check [This](https://www.figma.com/developers/api#authentication) to set it up for yourself)
+- Figma File ID
+- Figma icons page
 
 ## Quick start
 
-1.  **Enter project directory**
+1.  **Enter the project directory**
 
     ```sh
-    cd deriv-icons
+    cd quill-icons
     ```
 
-2.  **Setup .env file**
-    create a .env file inside `deriv-icons` folder with this content:
+2.  Create a `.env` file inside `quill-icons` folder with this content:
+
     ```
-    FIGMA_TOKEN=YOUR_FIGMA_TOKEN
-    FILE_ID=XegjSl9fWXH2O7Mxo0Ctie
-    ICONS_PAGE=deriv-icons
+    FIGMA_TOKEN=your_figma_access_token
     ```
+
 3.  **Install your dependencies:**
 
     ```sh
@@ -56,27 +95,23 @@ With [@figma-export](https://www.npmjs.com/package/@figma-export/cli) we export
 
 ## Figma Components Conventions
 
-For now we don't have any conventions yet, but after coordintating with design team will update this section.
+Currently, we don't have specific conventions. We will update this section in coordination with the design team.
 
-## Build and Publish @deriv/icons Package
+## Exporting New Icons
 
-We use [rollup](https://rollupjs.org/guide/en/) for package bundling, in order to build the actual package you do the following:
+To export new icons, run `npm run rebuild`. It will automatically export, optimize, and convert SVGs to React components. Afterward, just commit the changes and create a new PR.
 
-1.  **Setup .env file**
-    Configure the environment variables of the platform with these:
-    ```
-    FIGMA_TOKEN=YOUR_FIGMA_TOKEN
-    FILE_ID=XegjSl9fWXH2O7Mxo0Ctie
-    ICONS_PAGE=deriv-icons
-    ```
-2.  **Install your dependencies:**
+## Build and Publish
 
-    ```sh
-    npm ci
-    ```
+We use **[semantic-release](https://semantic-release.gitbook.io/semantic-release/)** for automating the release workflow. Commit messages determine the release type. Refer to the table below for guidelines.
 
-3.  **Export:**
+| Commit message                      | Release type                |
+| ----------------------------------- | --------------------------- |
+| build, ci, chore, docs, style, test | **Patch** (Fix Release)     |
+| refactor                            | **Minor** (Feature Release) |
 
-    ```sh
-    npm run export
-    ```
+**Triggering a release**
+
+For each new commit added to one of the release branches (for example: main, next, beta), with git push or by merging a pull request or merging from another branch, a CI build is triggered and runs the semantic-release command to make a release if there are codebase changes since the last release that affect the package functionalities.
+
+For further information please checkout the **[semantic-release](https://semantic-release.gitbook.io/semantic-release/)** documentation.