Components
Utilities
Fonts
Components
Utilities
Fonts
The Icon
... I'm the title
The Icon's purpose, is to give to an element the height of the text in which it is.
One cool feature, is that, if the `path` attribute is an svg, the svg code from the file will be injected into the icon so you can then manipulate the svg with some JS or CSS.
You can also define a scale attribute to make it bigger or smaller than the text.
- scale: define the scale value of the element.
- path: the path of the svg or image.
- gap: define the space between the text and the icon.
- gap-dir: define the side of the gap, start for a gap in direction of the begining of th sentence, and end for a gap in direction of the end of the sentence.
Examples
As you can see, the icon is the same size than the text.
The icon is the same size as text !
Sometimes, you want the icon to be bigger or smaller than the text, to do so, you just have to define a `scale` attribute.
The icon is smaller than text !
The icon is bigger than text !
If you want a gap between the icon and the text, just define a `gap` value. It will space the icon form the text on both sides.
If you want the gap to be only directed to the begining or the end of the sentece define a gap-dir at "end" or "start".