Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
84 lines (54 loc) · 4.33 KB

CONTRIBUTING.md

File metadata and controls

84 lines (54 loc) · 4.33 KB

Contributing

Thanks for your interest in contributing to Dialtone Icons! Please take a moment to review this document before submitting a pull request.

Overview

What is Dialtone Icons?

Dialtone Icons is an icon repository which serves to store, pre-process and ship icons to use either on Dialtone-vue icon or standalone as SVG files.

Check the Icon catalog.

Adding an icon

  • In the Icons Figma file select and export each icon as SVG.
  • Place the exported SVG file(s) in the appropriate folder category inside ./src/svg/
  • Add the name and keywords in the keywords-icons.json file. Add the keywords array as the value. e.g:
{
   "arrows": {
     "arrow-left": ["arrow", "left", "direction"],
   //   ...
   }
   // ...
}
  • Run nx run dialtone-icons:build
  • Add, commit and push your changes.
  • Open a pull request.
  • Once approved it can be merged into staging and will go out in the next release.

Learn more on How to craft an icon.

Claude Code users: The /icon skill automates SVG validation, normalization, and build verification. Run /icon add <name> or /icon update <name> to use it.

SVG Preparation

Figma exports require cleanup before committing. These steps apply to standard icons (all categories except brand-full-color). Icons in brand-full-color may use solid brand hex colors, gradients, and other attributes that should be preserved as-is.

Source from 12px (size 100)

Always export from the Figma component's 12px size (size 100). Full-color icons in the brand-full-color category may use 24x24.

Outline strokes

Icons must be fill-based, not stroke-based. In Figma, run Edit > Outline Stroke before exporting. Confirm the icon renders correctly after outlining.

Normalize fill colors

The build pipeline replaces these fill values with currentColor: black, #000, #000000, #0D0C0F, #222, #222222.

Figma commonly exports fill="#1C1C1C" or other near-black hex values. These are NOT in the replacement list and will pass through as hardcoded colors, preventing CSS color inheritance. Change any non-standard dark fill to fill="black" before committing.

Remove no-op clipPath wrappers

Figma adds <g clip-path="url(#...)"> with a <clipPath><rect width="12" height="12"> when "Clip content" is enabled on the frame. This clips to the full viewBox — a no-op that adds unnecessary markup. Remove the <g> wrapper, the <defs>, and the <clipPath> block.

Consider combining path elements

If multiple <path> elements share all attributes (fill, fill-rule, clip-rule, opacity, transform, etc.), consider combining them into a single <path> by concatenating their d values. Do not combine paths that differ in any attribute beyond d.

Icon build process

Because our SVG's come from Figma, it's possible to have duplicated identifiers if we exported the icons as is. We convert our icons into Vue components and using a common function called getUniqueString() from utils to prefix the identifiers of every icon with dt-icon and append a counter. That way even if we have multiple instances of the same icon, they'll have different identifiers.

Generated Vue icons are output to the src/icons/ folder when you do nx run dialtone-icons:build

Important Folders and Files

  • src/svg/icons: All the source SVG icon files.
  • src/svg/illustrations: All the source SVG icon files.
  • src/keywords-icons.json: Contains the categories on which icons are going to be included and the keywords to make the icons more discoverable while searching on Dialtone icons documentation.
  • src/keywords-illustrations.json: Contains the categories on which illustrations are going to be included and the keywords to make the illustrations more discoverable.
  • icons.js: This file is auto generated and used to list all the icons in Storybook.
  • illustrations.js: This file is auto generated and used to list all the illustrations in Storybook.