Elgato_dark/zammad
1
0
Fork 0
mirror of https://github.com/zammad/zammad synced 2026-05-24 09:48:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
zammad/app/frontend/shared/components/CommonIcon
History
Mantas Masalskis a1b9ef2bbb Maintenance: Update copyright information.
2026-01-02 15:41:09 +02:00
..
__tests__ Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00
CommonIcon.vue Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00
injectIcons.ts Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00
README.md Maintenance: Enable Markdown linting and adjust content. 2025-03-20 14:43:32 +01:00
types.ts Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00
useIcons.ts Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00
usePrivateIcon.ts Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00
useRawHTMLIcon.ts Maintenance: Update copyright information. 2026-01-02 15:41:09 +02:00

README.md

Rules for Icons in the New Stack

  • All icon names must be unique, however you are free to put them in another set (subdirectory).
  • All icons must use fill for their elements, but not stroke. In case of outlined design, please expand the stroke into a path first.
  • All icons must be provided in a monochrome design and any fill values must be removed from the SVG definition. This includes fill="none" on the root element too. An implicit fill: currentColor rule is applied by CommonIcon component, so it will inherit the color of the surrounding text.
  • Attributes fill-rule and clip-rule can be applied only if the design requires it (no implicit attributes are allowed).

Rules for desktop Icon Set

  • All icons must have size of width="16" and height="16", any further resizing can happen only inside CommonIcon component. Please make sure that viewBox is set to 0 0 16 16.
  • All icons must be put into app/frontend/apps/desktop/initializer/assets/ directory.
  • All third-party icons must be credited properly in app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md.

Rules for mobile Icon Set

  • All icons must have size of width="24" and height="24", any further resizing can happen only inside CommonIcon component. Please make sure that viewBox is set to 0 0 24 24.
  • All icons must be put into app/frontend/apps/mobile/initializer/assets/ directory.
  • All third-party icons must be credited properly in app/frontend/apps/mobile/initializer/3RD-PARTY-ICONS.md.

Using Icons in the "shared" Context

All icon names used in shared context should refer to an alias defined in mobileIconsAliasesMap.ts and/or desktopIconsAliasesMap.ts. Alias refers to the icon name from assets folder depending on the app. Alias name is always preferred when displaying an icon even if icon with that name already exists.