القائمة
Best practices for the Canopy UI Icon component. Trigger when using lg-icon, LgIconComponent, or adding functional UI icons in an Angular project using Canopy.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Apply the Canopy v36→v37 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v37, upgrade @legal-and-general/canopy from v36, or fix errors after upgrading to v37.
Best practices for Canopy list-with-icons usage. Trigger when using lg-list-with-icons, lg-list-with-icons-item, ordered list markers, or list item variant theming in Angular.
Apply the Canopy v35→v36 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v36, upgrade @legal-and-general/canopy from v35, or fix errors after upgrading to v36.
Best practices for the Canopy Header component. Trigger when adding a site header, primary navigation, account menu, notification badge, or logo in an Angular project using Canopy.
Best practices for the Canopy Pictogram component. Trigger when using lg-pictogram, LgPictogramComponent, or adding illustrative pictograms in an Angular project using Canopy.
Apply the Canopy v34→v35 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v35, upgrade @legal-and-general/canopy from v34, or fix errors after upgrading to v35.
| name | canopy-icon |
| description | Best practices for the Canopy UI Icon component. Trigger when using lg-icon, LgIconComponent, or adding functional UI icons in an Angular project using Canopy. |
| license | MIT |
| metadata | {"source":"https://github.com/Legal-and-General/canopy/tree/master/projects/canopy/src/lib/icon/docs/guide.mdx"} |
This skill provides usage guidance and input reference for the Canopy lg-icon component from @legal-and-general/canopy.
Apply this skill whenever you use lg-icon or LgIconComponent.
See also: the
pictogramskill for brand/illustrative icons.
import { LgIconComponent } from '@legal-and-general/canopy';
<lg-icon name="email"></lg-icon>
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
name | string | undefined | Yes | The name of the icon. |
Icons size to 1em (height and width), inheriting the font-size of their parent. Scale icons on the 4px scale.
By default, icons use currentColor for their fill, so they inherit the text colour of their parent element.
<span style="color: var(--colour-green-700)">
<lg-icon name="email"></lg-icon>
</span>
Note: The help and query-outline icons cannot change colour.
aria-hidden="true":
<lg-icon name="arrow-right" aria-hidden="true"></lg-icon>
<lg-icon name="link-external" aria-hidden="true"></lg-icon>
<span class="lg-visually-hidden">opens in a new tab</span>
aria-hidden="true" to decorative icons.