Home Components SVG
SVG
Overview Playground API
Render SVG content from an external source.
Usage Fancy larger or smaller icons? Add size attribute for additional sizes. 

  <goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg"></goat-svg>
Color Variants 


<goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="color: var(--color-primary)"></goat-svg>
<goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="color: var(--color-success)"></goat-svg>
<goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="color: var(--color-warning)"></goat-svg>
<goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="color: var(--color-error)"></goat-svg>

<span style="color: pink">
  <goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg"></goat-svg>
</span>
Sizes 

  <goat-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="width: 2rem"></goat-svg>
Usage Color Variants Sizes
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next