SVG Icons
‹ BackSVG icons are stored in /app/views/shared/icons
as _icon_name.svg.erb
.
Icon Helper
There is a rails helper for using these SVG icons in your project:
<%= icon("search", width: 32, height: 32) -%>
You can pass in width and height attributes in to the helper to control the size of the icon:
<%= icon("search", width: 16, height: 16) -%> <%= icon("search", width: 32, height: 32) -%> <%= icon("search", width: 64, height: 64) -%>
You can control the colouring of the icon using the fill
and stroke
attributes:
<%= icon("search", width: 32, height: 32, stroke: "#cccccc") -%> <%= icon("search", width: 32, height: 32, stroke: "red") -%> <%= icon("search", width: 32, height: 32, stroke: "#ff00bb") -%>
Project Icons
This project has the following icons:
Helper Sass Mixins
icon-block
icon-block
will let you create a sized element with icon centred inside of it. This is ideal for little square blocks with icons inside them.
Passing only one value in will size the element and the icon will use it's inline width/height to size itself:
<div class="icon-block-32"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" style="width: 32px; height: 32px; " class="icon-clock"> <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke"> <path d="M23.5,12 C23.5,18.352 18.35,23.5 12,23.5 C5.647,23.5 0.5,18.352 0.5,12 C0.5,5.648 5.647,0.5 12,0.5 C18.35,0.5 23.5,5.648 23.5,12 L23.5,12 Z"/> <polyline points="11.5 6.5 11.5 12 17.5 17.5"/> </g> </svg></div>
.icon-block-32 { @include icon-block(32px); background: orange; }
Passing two values in will size the element as a square using the first value as the width and height, and size the icon as a square as well using the second value as the width and height:
<div class="icon-block-32-16"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" style="" class="icon-clock"> <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke"> <path d="M23.5,12 C23.5,18.352 18.35,23.5 12,23.5 C5.647,23.5 0.5,18.352 0.5,12 C0.5,5.648 5.647,0.5 12,0.5 C18.35,0.5 23.5,5.648 23.5,12 L23.5,12 Z"/> <polyline points="11.5 6.5 11.5 12 17.5 17.5"/> </g> </svg></div>
.icon-block-32-16 { @include icon-block(32px, 16px); background: orange; }
You can also treat both values as a list of ($width, $height)
:
<div class="icon-block-lists"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="" class="icon-chevron_right"> <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/> </svg></div>
.icon-block-lists { @include icon-block((64px, 32px), (11px, 16px)); background: orange; }
table-icon
You can create some text aligned with an icon with the table-icon($icon-size)
mixin, like so:
<div class="icon-table-32"> <div class="icon-table--icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" style="width: 32px; height: 32px; " class="icon-clock"> <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke"> <path d="M23.5,12 C23.5,18.352 18.35,23.5 12,23.5 C5.647,23.5 0.5,18.352 0.5,12 C0.5,5.648 5.647,0.5 12,0.5 C18.35,0.5 23.5,5.648 23.5,12 L23.5,12 Z"/> <polyline points="11.5 6.5 11.5 12 17.5 17.5"/> </g> </svg> </div> <div class="icon-table--label"> This text is aligned to the icon </div> </div>
.icon-table-32 { @include icon-table(32px); }
You can pass in custom guttering with a second parameter:
<a href="#" class="icon-table-16"> <div class="icon-table--icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" style="width: 16px; height: 16px; " class="icon-arrow_left"> <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="rotate(180 12.5 12)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke"> <path d="M23.4687,12 L0.4687,12"/> <polyline points="10.969 22.791 23.469 11.791 10.969 .791"/> </g> </svg> </div> <div class="icon-table--label"> Go back </div> </a>
.icon-table-16 { @include icon-table(16px, 8px); }