Skip to content

Adding new icons

Dimitar Kalaydzhiev edited this page Feb 7, 2024 · 6 revisions

General Workflow

Adding a new icon to the kendo-icons repository is a two step process:

Create the Icon

  1. Create your icon in Adobe Illustrator and follow the guidelines described in https://www.telerik.com/design-system/docs/foundation/iconography/styles-and-guidelines/
  2. The final file is saved (exported) together with the canvas and these properties:

Commit the Icon to the repository

  1. Create a Branch with a meaningful name (e.g. "sparkles") and a meaningful commit message (e.g. "feat: add sparkles icon").
  2. Copy the newly created SVG icon in the src/telerik-icons/solid folder.
  3. Create a Pull Request from the new branch and specify the category in which the icon should be, as well as alias names if any in a comment.
  4. The Front-End team is automatically assigned for pull request review and will handle the metadata generation(described in next steps).

Generate Icons Metadata

  1. Run npm run update-icons to update the icons.json and icons-list.json files.

  2. Open the icons.json and fill in the relevant icon categories for the newly added icon, e.g:

      {
            "name": "caret-tr",
            "ligatures": [],
            "aliases": [],
            "categories": [ "navigation" ],
            "unicode": "e000"
        }
    
  3. Fill in the aliases and ligatures fields (if there are any).

  4. Stage and commit* the updated icons.json and icons-list.json.

  5. Push the changes.

  6. After the new icon and the updated files are pushed, an additional commit will be automatically generated with the updated font and styles referencing the new icon.

*Please follow the commit message guidelines described here: Commit Message Guidelines Wiki.

Clone this wiki locally