https://github.com/indigomultimediateam/svgicon
Web component handling Icon System with SVG Sprites
https://github.com/indigomultimediateam/svgicon
svg svg-icon svg-sprites web-component webcomponent webcomponents
Last synced: about 2 months ago
JSON representation
Web component handling Icon System with SVG Sprites
- Host: GitHub
- URL: https://github.com/indigomultimediateam/svgicon
- Owner: IndigoMultimediaTeam
- License: mit
- Created: 2020-08-19T09:55:50.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-20T14:38:33.000Z (about 5 years ago)
- Last Synced: 2025-01-12T15:11:31.013Z (over 1 year ago)
- Topics: svg, svg-icon, svg-sprites, web-component, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVGIcon
Web component handling Icon System with SVG Sprites
## Overview
This library provides simple way using icons in svg sprites, just write
```HTML
```
into your HTTML file and or
```HTML
SVGIcon.setAlias("icon", "path/file.svg#")
```
Obviously the [Custom Elements (V1)](https://caniuse.com/#feat=custom-elementsv1) are in game, so you can safely use only in latest version of Firefox/Chrome/Chromium/Edge.
## Usages
- SVG sprites file can looks like: `……` (e.g. [icons.svg](./docs/examples_files/icons.svg?short_path=2105ba1)).
- Library and config scripts should be ideally placed before icons will be used (convenient place is ``). There are several types of library in [*bin/*](./bin/) folder.
- Web component is now fully functional
## Default behaviour
- Library expose default styling via css var `var(--svg-icon-size, 1em)` and `svg-icon` is block element with size of `--svg-icon-size`
- In fact library uses ``, so you can follow [Icon System with SVG Sprites | CSS-Tricks](https://css-tricks.com/svg-sprites-use-better-icon-fonts/). **But, instead of `` use ``** (for more freedom – using `viewBox`)
## More info
- See [changeOptions(def)](./docs/SVGIcon-namespace.md#changeOptions), [setAlias(alias, target)](./docs/SVGIcon-namespace.md#setAlias) and [removeAlias(alias)](./docs/SVGIcon-namespace.md#removeAlias)
- Or [full documentation](./docs/SVGIcon-namespace.md)
- See [examples](https://indigomultimediateam.github.io/SVGIcon/examples.html)
## Study resourses
- [Icon Fonts vs. SVGs: An Ultimate Guide to Accessible Web Icons - DEV](https://dev.to/linuxfuture/icon-fonts-vs-svgs-an-ultimate-guide-to-accessible-web-icons-2lh6)
- [SVG Fragment Identifier Linking](http://www.broken-links.com/tests/svg/fragment-identifiers.php)