https://github.com/pictogrammers/svg-icon

A vanilla webcomponent for rendering SVG path based icons.
https://github.com/pictogrammers/svg-icon

icon svg-path webcomponent

Last synced: 30 days ago
JSON representation

A vanilla webcomponent for rendering SVG path based icons.

• Host: GitHub
• URL: https://github.com/pictogrammers/svg-icon
• Owner: Pictogrammers
• License: mit
• Created: 2020-09-21T00:44:31.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-11T15:50:24.000Z (2 months ago)
• Last Synced: 2024-10-14T02:03:14.316Z (30 days ago)
• Topics: icon, svg-path, webcomponent
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 10
• Watchers: 1
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# SVG Icon WebComponent

[![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon)

[![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon)

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](https://materialdesignicons.com/) and [SimpleIcons](https://simpleicons.org/).

# Usage

1. Install the package from NPM

    ```

    npm install @jamescoyle/svg-icon

    ```

2. Import the component into your application

    ```

    import '@jamescoyle/svg-icon'

    ```

3. Use the icon in your markup

    ```

    

    ```

# Attributes

| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) value. |

# Styling

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.

# Accessibility

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.