Previews

1
2
3
4
5
6
7
8
9
10
11
12
13
<p style="max-width: 500px">
Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
onto the page as an SVG <symbol> element and included into the SVG you see below with the <use> element.
See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
more information.
</p>
<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: octicon, size: :medium }])) %>
<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled <%= octicon %> icon" tabindex="0">
<circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
<use href="#octicon_<%= octicon %>_24" x="8" y="8" />
</svg>