Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-icon): use SVG icons instead of icon font #649

Merged
merged 41 commits into from
Jul 19, 2019
Merged

feat(ui5-icon): use SVG icons instead of icon font #649

merged 41 commits into from
Jul 19, 2019

Conversation

pskelin
Copy link
Contributor

@pskelin pskelin commented Jul 15, 2019

  • ui5-icon now uses SVGs (Scalable Vector Graphics) as they allow vector graphics to be displayed in the browser. SVGs are quickly becoming the new standard for web icons and animations. They not only offer superior scaling, but they often render more quickly and reliably than icon fonts.
  • And, you can now import only the icons you actually need, which will reduce the overall bundle size.

BREAKING CHANGE:
To display an icon, you should explicitly import the desired one(s), as shown below:

import "@ui5/webcomponents-base/dist/Icon";
import "@ui5/webcomponents-base/dist/icons/slim-arrow-left.js";
<ui5-icon src="sap-icon://slim-arrow-left"></ui5-icon>

If you indirectly use icons via other components API, you should import the icons as well:

import "@ui5/webcomponents-base/dist/icons/slim-arrow-left.js";
<ui5-button icon="sap-icon://slim-arrow-left"></ui5-button>
<ui5-li icon="sap-icon://slim-arrow-left"></ui5-li>

@ilhan007 ilhan007 marked this pull request as ready for review July 18, 2019 07:32
@ilhan007 ilhan007 changed the title SVG icons feat(ui5-icon): use SVG icons instead of icon font Jul 18, 2019
@MapTo0 MapTo0 merged commit b6352d8 into master Jul 19, 2019
@MapTo0 MapTo0 deleted the svg-icons branch July 19, 2019 08:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants