Nx Executors

This document provides an overview of the custom Nx Executors used in the Canvas Icons project, which are part of the @workday/canvas-assets-nx-plugin package. These executors serve as utility functions to streamline workflows and deliverables.

⚠️

Required options must be specified in project.json or in the command line.

`icon-js`

The icon-js executor is designed to build JavaScript files (with common js or es6 code styles) from SVG icons. This process helps in delivering optimized and ready-to-use icon assets to users.

Options

Option	Required	Type	Description
`iconType`	✅ true	`system` or `expressive`	Icon type to get correct file paths and ts types.
`moduleType`	✅ true	`commonjs` or `es6`	Module Type to specify code style.

Usage

Add the executors to your project’s configuration. Update package project.json file to include the executors as follows:

canvas-system-icons-web/project.json


{
  "name": "@workday/canvas-system-icons-web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "targets": {
    "icon-es6": {
      "executor": "@workday/canvas-assets-nx-plugin:icon-js",
      "options": {
        "iconType": "system",
        "moduleType": "es6"
      }
    },
  }
}

To use the icon-js executor, run the following command:


nx run @workday/canvas-system-icons-web:icon-es6

`sprites`

The sprites executor combines SVGs from dist/svg into a single sprite sheet under dist/sprite.

Options

Option	Required	Type	Description
`iconType`	✅ true	`system` or `expressive`	Used in the output sprite filename.

Usage

project.json


{
  "name": "@workday/canvas-system-icons-web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "targets": {
    "sprites": {
      "executor": "@workday/canvas-assets-nx-plugin:sprites",
      "options": {
        "iconType": "system"
      }
    }
  }
}


nx run @workday/canvas-system-icons-web:sprites