Icon Specification

Icon Specification

Contents

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

Owned by

Team Name: CodeX

Developer Name: Diyan Dimitrov

Designer Name:

Requires approval from

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

Signed off by

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

Revision History

Version	Users	Date	Notes
1	Diyan Dimitrov	26-Jul-2021

1. Overview

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

Objectives

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

Acceptance criteria

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.

2. User Stories

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.

3. Functionality

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

Keys	Description

3.5. API

Properties

Name	Description	Type	Default value	Reflected
name	The name of the icon.	string	undefined	false
collection	The collection of icons.	string	default	false
size	The size of the icon.	small | medium | large	medium	true
mirrored	Indicates whether to mirror the icon.	boolean	false	true

Global Methods

Name	Description	Return type	Parameters
registerIcon	Registers an icon with url.	Promise<void>	name: string, url: string, collection = 'default'
registerIconFromText	Registers an icon with SVG text.	void	name: string, iconText: string, collection = 'default'

Events

None

Slots

None

CSS Parts

None

4. Test Scenarios

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.

5. Accessibility

ARIA Support

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

RTL Support

6. Assumptions and Limitations

Assumptions	Limitation Notes
No support for icon fonts	The component works only with SVG icons
No built-in icons	Only icons that are necessary for our controls will be pre-registered
No src property on the icon component	The icon should be registered using the API
No slot support	The only way to provide an icon is setting its name property

7. References