1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Team Name: CodeX

Developer Name: Diyan Dimitrov

Designer Name:

• Peer Developer Name | Date:
• Design Manager Name | Date:

• Radoslav Mirchev| Date:
• Radoslav Karaivanov | Date:

The <igc-icon> component allows visualizing collections of pre-registered SVG icons.

The icons component displays SVG icon. The SVG icons should be pre-registered.

1. The button component should accept icon name and icon collection configuration.
2. The SVG icons should be registered with name, collection and url or an SVG text.
3. The icon component should support small, medium and larges sizes.
4. The icon component should be configured whether to mirror the icon. This is useful for scenarios where the developer wants to mirror the icon when the direction is right to left. However we do not auto-detect the direction so if mirrored is set to true the icon will be mirrored no matter what is the direction.

Elaborate more on the multi-facetted use cases

Developer stories:

• Story 1: As a developer, I want to specify a name of the icon.
• Story 2: As a developer, I want to specify a collection of icons.
• Story 3: As a developer, I want to be able to register an icon with name, collection and url or SVG text.
• Story 4: As a developer, I want to be able to specify a size for the icon (small, medium, large).
• Story 5: As a developer, I want to be specify whether the icon should be mirrored.

End-user stories:

• Story 1: As an end-user, I want to be given a visual representation of an icon.

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience

** Integration scenarios or functionality with other features/components prototype ** End-to-end user experienceprototype ** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off

3.2. Developer Experience

• Register an icon:

registerIconFromText(
  'bug',
  '<svg xmlns="http://www.w3.org/2000/svg" ... /></svg>'
);

registerIcon(
  'search',
  'https://unpkg.com/[email protected]/action/svg/production/ic_search_24px.svg',
  'material'
);

• Define an icon component:

<igc-icon name="bug"></igc-icon>
<igc-icon name="search" collection="material"></igc-icon>

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

3.5. API

None

None

None

Automation

• Should render icon with a name and default collection.
• Should render icons with the same name from different collections.
• Should update icon component after an icon is registered.
• Should throw descriptive error when icon can't be registered.
• Should have applied CSS classes for all sizes.
• Should mirror the icon when mirrored is set to true.

ARIA Support

• <igc-icon> should have role="img"

RTL Support