A basic webcomponent for rendering a single path SVG icon. This component makes it easy to use SVG path based icon packs such as MaterialDesignIcons and SimpleIcons.
-
Install the package from NPM
npm install @jamescoyle/svg-icon -
Import the component into your application
import '@jamescoyle/svg-icon' -
Use the icon in your markup
<svg-icon type="mdi" path="M...z"></svg-icon>
| Name | Default | Description |
|---|---|---|
| type | null | This sets the size and viewbox to match the recommended size for the icon pack specified. |
| path | null | Required. An SVG path to render as an icon |
| size | 24 | The width and height of the SVG element |
| viewbox | "0 0 24 24" | The viewBox of the SVG element |
| flip | null | One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s). |
| rotate | 0deg | Rotates the icon by the specified value. Can be any valid CSS angle value. |
By default the icon will inherit the current font color of the container it is placed within. You can easily provide a specific color using an inline style on the element (style="color: red") or can target the tag as normal with CSS rules.
You should make use of aria attributes to improve accessibility for users that use screen reading technology. You can use aria-labelledby to create a link between an icon and its label. A descriptive aria-label can be used to allow screen readers to announce an icon if there is no visual label to accompany it.