All Telicon icons are compiled to a single SVG sprite which can be found in the /dist folder of the project. To begin using Telicon icons, simply copy this .svg file to the desired location within your project structure (a good suggestion is the /img folder). An added benefit here is that the file will be cached by the browser, meaning only one server request is needed for the entire library of icons.
Once you've included Telicon in your project, placing icons in your layout is quite simple. By nesting a self-closing <use> element within an <svg> tag, you can reference the ID of an individual icon from the sprite. This will embed that specific icon within the <svg> element.
<body>
body content...
<svg class="icon">
<use xlink:href="your⁄path⁄to⁄#device-voip-phone" ⁄>
</svg>
<svg class="icon">
<use xlink:href="your⁄path⁄to⁄#operator" ⁄>
</svg>
<svg class="icon">
<use xlink:href="your⁄path⁄to⁄#phone-inbound" ⁄>
</svg>
<svg class="icon">
<use xlink:href="your⁄path⁄to⁄#thumbs-up" ⁄>
</svg>
other body content...
</body>
Notice that there is an .icon class applied to the <svg> element. It is recommended to use a helper class to size and position your icons, as svg elements will fill 100% width of their parent containers otherwise. The following code can be copied/modified to suit your needs, or if you wish to manipulate styles on a per-icon basis that is an option as well. Regardless of which route you take, you will need to implement some sort of base styles.
.icon {
/* Default size for Telicon icons 16px = 1rem */
height: 1rem;
width: 1rem;
/* Control position and alignment */
display: inline-block;
line-height: inherit;
vertical-align: middle;
/* Let the icon take whatever color the parent has */
fill: currentColor;
/* Prevent the icon from shrinking inside a flex container */
flex-shrink: 0;
}
And that's it! Telicon icons should now be rendering in your layouts.
To view all currently available icons, check out the icon reference sheet.
You can follow and learn more about the project's progress on github.