@spectrum-web-components/icon
Advanced tools
**sp-icon** will allow you to render icons that have been supplied to the page via icon sets.
sp-icon will allow you to render icons that have been supplied to the page via icon sets.
<sp-icon name="ui:Magnifier"></sp-icon>
Icons are available in various sizes in Spectrum ranging from xxs to xxl, m being the default. We can specify the size via size attribute.
<sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
<sp-icon size="xs" name="ui:Magnifier"></sp-icon>
<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<sp-icon size="m" name="ui:Magnifier"></sp-icon>
<sp-icon size="l" name="ui:Magnifier"></sp-icon>
<sp-icon size="xl" name="ui:Magnifier"></sp-icon>
<sp-icon size="xxl" name="ui:Magnifier"></sp-icon>
Icons apply their color as currentColor so change the color property of the element for customization.
<sp-icon name="ui:Magnifier" style="color: red;"></sp-icon>
aria-hidden is set to true by default for Icons. The label attribute suppresses this and adds the label text as the aria-label of the icon.
<sp-icon name="ui:Magnifier" label="Magnify"></sp-icon>
FAQs
`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a
The npm package @spectrum-web-components/icon receives a total of 7,800 weekly downloads. As such, @spectrum-web-components/icon popularity was classified as popular.
We found that @spectrum-web-components/icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.