Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.js
readme.styl
test.html
test.js

README.md

Icon

The Icon component is used to create an SVG icon with a custom size and color.

Your single SVG sprite file should have the following base structure, using <symbol> and an id to refer to the specific icon:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <symbol id="example">
    <path />
  </symbol>
</svg>

Demo

Example

Code

HTML

<tonic-icon
  symbol-id="example"
  src="/sprite.svg"
  fill="red"
  size="40px">
</tonic-icon>

Api

Properties

Property Type Description Default
size string Changes the width and height of the icon. 25px
fill string Changes the color of the icon. var(--primary)
src string Allow a custom icon from a sprite. ./sprite.svg
theme string Adds a theme color (light, dark or whatever is defined in your base CSS. light