Merge branch '36231-better-svg-usage-in-the-frontend' into 'master'

Resolve "Better SVG Usage in the Frontend"

Closes #36231

See merge request gitlab-org/gitlab-ce!13435

.eslintignore

@@ -7,4 +7,5 @@
 /vendor/
 karma.config.js
 webpack.config.js
+svg.config.js
 /app/assets/javascripts/locale/**/*.js

app/assets/images/icons.json

+{"iconCount":134,"icons":["abuse","account","admin","angle-double-left","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close-m","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
\ No newline at end of file

app/assets/images/illustrations/pipelines_empty.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g fill="#e5e5e5" transform="translate(0 102)"><rect width="74" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="M152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 152 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 166 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 180 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 194 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 208 23"/></g><g fill="#31af64"><path fill-rule="nonzero" d="M19 144c-10.493 0-19-8.507-19-19s8.507-19 19-19 19 8.507 19 19-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path d="M17.07 127.02l-2.829-2.829a1.995 1.995 0 0 0-2.828 0 1.995 1.995 0 0 0 0 2.828l4.243 4.243a1.995 1.995 0 0 0 2.822.006l7.79-7.79a1.997 1.997 0 0 0-.006-2.823 1.992 1.992 0 0 0-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a"><path fill-rule="nonzero" d="M126 149.5c-12.979 0-23.5-10.521-23.5-23.5s10.521-23.5 23.5-23.5 23.5 10.521 23.5 23.5-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5s-8.283-18.5-18.5-18.5-18.5 8.283-18.5 18.5 8.283 18.5 18.5 18.5"/><path d="M130.24 126l2.833-2.833a3 3 0 0 0-4.243-4.243l-2.833 2.833-2.833-2.833a3 3 0 0 0-4.243 4.243l2.833 2.833-2.833 2.833a3 3 0 0 0 4.243 4.243l2.833-2.833 2.833 2.833a3 3 0 0 0 4.243-4.243L130.24 126"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="M236 139c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="M64.82 76H98c4.419 0 8-3.579 8-7.99V7.99C106 3.577 102.417 0 98 0H8.009c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855a4.357 4.357 0 0 0 6.354 0L64.824 76"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="M151.869 77.403c-13.26 9.264-31.649 7.977-43.484-3.858-13.279-13.279-13.279-34.806 0-48.084 13.278-13.278 34.805-13.278 48.083 0 11.836 11.836 13.118 30.23 3.858 43.485.133.111.262.229.387.354l15.556 15.555a6.004 6.004 0 0 1 0 8.486 5.997 5.997 0 0 1-8.486 0l-15.555-15.556a6.051 6.051 0 0 1-.355-.387m-1.06-9.512c10.154-10.154 10.154-26.617 0-36.77-10.153-10.154-26.616-10.154-36.77 0-10.153 10.153-10.153 26.616 0 36.77 10.154 10.153 26.617 10.153 36.77 0"/></g></svg>
\ No newline at end of file

app/assets/images/illustrations/pipelines_failed.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 249" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M260.03 114h23.972v-.013c19.972-.53 36-16.887 36-36.987 0-20.435-16.565-37-37-37-.993 0-1.977.039-2.95.116-4.95-14.605-18.773-25.12-35.05-25.12a36.87 36.87 0 0 0-15.32 3.311c-6.649-9.841-17.909-16.311-30.68-16.311-20.435 0-37 16.565-37 37 0 .701.019 1.397.058 2.088C145.95 45.083 134 59.645 134 76.996c0 20.435 16.565 37 37 37 .324 0 .646-.004.968-.012"/><ellipse id="b" cx="41" cy="41" rx="41" ry="41"/><mask id="c" width="186" height="112" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><mask id="d" width="82" height="82" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask></defs><g fill="none" fill-rule="evenodd"><path stroke="#b5a7dd" stroke-width="4" d="M228.415 137.792c8.443 17.156 21.89 32.082 39.688 42.358"/><path fill="#fb722e" d="M284.464 183.822a2.006 2.006 0 0 1 2.74-.727l6.914 3.992a2.001 2.001 0 0 1 .741 2.737 2.006 2.006 0 0 1-2.74.727l-6.914-3.992a2.001 2.001 0 0 1-.74-2.737m-5 8.66a2.006 2.006 0 0 1 2.74-.726l6.913 3.991a2.001 2.001 0 0 1 .741 2.737 2.006 2.006 0 0 1-2.74.727l-6.914-3.991a2.001 2.001 0 0 1-.74-2.737"/><path fill="#fde5d8" fill-rule="nonzero" d="M267.072 189.947l5.196 3a5.998 5.998 0 0 0 8.195-2.194l3.005-5.205a5.995 5.995 0 0 0-2.198-8.193l-5.196-3-9 15.588m6.032-18.447a3.005 3.005 0 0 1 4.098-1.11l6.07 3.505c4.784 2.761 6.426 8.871 3.662 13.658l-3.005 5.204c-2.76 4.782-8.875 6.42-13.659 3.658l-6.07-3.505a2.999 2.999 0 0 1-1.088-4.104l9.992-17.306"/><g fill-rule="nonzero"><path fill="#e5e5e5" d="M260.597 18.747C266.208 9.657 276.116 4 287 4c17.12 0 31 13.879 31 31 0 7.02-2.34 13.685-6.58 19.1l3.149 2.466A34.855 34.855 0 0 0 322 35.001c0-19.33-15.67-35-35-35-12.286 0-23.476 6.384-29.808 16.647l3.404 2.1"/><path fill="#b5a7dd" d="M281.982 23.991l-2.526 1.154-2.992-2.993a.4.4 0 0 0-.564.009l-1.738 1.738a.392.392 0 0 0-.009.564l2.987 2.987-1.147 2.524a12.26 12.26 0 0 0-1.04 3.883l-.269 2.76-4.08 1.093a.399.399 0 0 0-.275.492l.636 2.375c.06.223.273.346.485.29l4.087-1.096 1.611 2.262a12.017 12.017 0 0 0 2.827 2.828l2.26 1.612-1.094 4.08a.399.399 0 0 0 .29.485l2.374.636a.393.393 0 0 0 .493-.275l1.093-4.08 2.763-.267a12.14 12.14 0 0 0 3.862-1.035l2.526-1.154 2.992 2.992a.4.4 0 0 0 .564-.008l1.738-1.738a.392.392 0 0 0 .009-.564l-2.987-2.987 1.147-2.524a12.26 12.26 0 0 0 1.04-3.883l.27-2.76 4.08-1.093a.399.399 0 0 0 .274-.493l-.636-2.374a.393.393 0 0 0-.485-.29l-4.087 1.096-1.611-2.262a12.017 12.017 0 0 0-2.826-2.828l-2.26-1.612 1.093-4.08a.399.399 0 0 0-.29-.485l-2.373-.636a.393.393 0 0 0-.493.274l-1.094 4.081-2.763.266c-1.336.129-2.64.48-3.862 1.036m3.48-5.02l.375-1.4a4.393 4.393 0 0 1 5.392-3.103l2.375.636a4.399 4.399 0 0 1 3.117 5.383l-.375 1.401a16.077 16.077 0 0 1 3.761 3.767l1.405-.376a4.397 4.397 0 0 1 5.386 3.118l.636 2.375a4.398 4.398 0 0 1-3.103 5.39l-1.402.376a16.217 16.217 0 0 1-1.378 5.143l1.027 1.026a4.392 4.392 0 0 1-.008 6.22l-1.739 1.738a4.4 4.4 0 0 1-6.224.008l-1.028-1.028a16.09 16.09 0 0 1-5.14 1.381l-.376 1.4a4.393 4.393 0 0 1-5.392 3.104l-2.374-.636a4.399 4.399 0 0 1-3.118-5.383l.376-1.401a16.077 16.077 0 0 1-3.762-3.767l-1.404.376a4.397 4.397 0 0 1-5.386-3.118l-.637-2.374a4.398 4.398 0 0 1 3.103-5.391l1.402-.376a16.217 16.217 0 0 1 1.378-5.143l-1.026-1.026a4.392 4.392 0 0 1 .008-6.22l1.738-1.738a4.4 4.4 0 0 1 6.224-.008l1.028 1.028a16.09 16.09 0 0 1 5.141-1.381"/><path fill="#6b4fbb" d="M286.367 37.355a2.439 2.439 0 1 0 1.262-4.711 2.439 2.439 0 0 0-1.262 4.711m-1.035 3.864a6.44 6.44 0 1 1 3.333-12.44 6.44 6.44 0 0 1-3.333 12.44"/></g><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#c)" stroke-linejoin="round" xlink:href="#a"/><g transform="translate(175 58)"><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#d)" xlink:href="#b"/><g fill-rule="nonzero"><path fill="#e5e5e5" d="M41 78c20.435 0 37-16.565 37-37S61.435 4 41 4 4 20.565 4 41s16.565 37 37 37m0 4C18.356 82 0 63.644 0 41S18.356 0 41 0s41 18.356 41 41-18.356 41-41 41"/><path fill="#b5a7dd" d="M34.363 26.44l-2.527 1.154-3.211-3.211a1.495 1.495 0 0 0-2.117-.005l-2.131 2.13a1.504 1.504 0 0 0 .005 2.117l3.206 3.206-1.147 2.524a16.09 16.09 0 0 0-.897 2.503 16.08 16.08 0 0 0-.475 2.616l-.269 2.76-4.379 1.174a1.495 1.495 0 0 0-1.063 1.83l.78 2.911a1.504 1.504 0 0 0 1.836 1.054l4.387-1.176 1.612 2.263a15.954 15.954 0 0 0 3.737 3.742l2.26 1.612-1.173 4.38a1.495 1.495 0 0 0 1.053 1.835l2.908.78a1.504 1.504 0 0 0 1.83-1.063l1.174-4.38 2.763-.266a15.977 15.977 0 0 0 5.108-1.372l2.527-1.154 3.211 3.212a1.495 1.495 0 0 0 2.117.005l2.131-2.131a1.504 1.504 0 0 0-.005-2.117l-3.206-3.206 1.147-2.524a16.09 16.09 0 0 0 .897-2.503 16.1 16.1 0 0 0 .475-2.616l.269-2.76 4.379-1.173a1.495 1.495 0 0 0 1.063-1.83l-.78-2.912a1.504 1.504 0 0 0-1.836-1.054l-4.387 1.176-1.612-2.262a15.954 15.954 0 0 0-3.737-3.743l-2.26-1.612 1.173-4.38a1.495 1.495 0 0 0-1.053-1.835l-2.908-.779a1.504 1.504 0 0 0-1.83 1.063l-1.174 4.38-2.763.265c-1.767.17-3.493.636-5.108 1.373m4.726-5.355l.455-1.699a5.504 5.504 0 0 1 6.73-3.89l2.907.778a5.495 5.495 0 0 1 3.882 6.735l-.455 1.699a19.95 19.95 0 0 1 4.673 4.68l1.704-.457a5.503 5.503 0 0 1 6.734 3.886l.78 2.91a5.493 5.493 0 0 1-3.894 6.73l-1.701.455a20.134 20.134 0 0 1-.593 3.265 20.134 20.134 0 0 1-1.119 3.124l1.245 1.246a5.507 5.507 0 0 1 .008 7.774l-2.13 2.13a5.5 5.5 0 0 1-7.775-.001l-1.248-1.248c-2 .914-4.157 1.502-6.387 1.717l-.455 1.699a5.504 5.504 0 0 1-6.73 3.89l-2.907-.778a5.495 5.495 0 0 1-3.882-6.735l.455-1.699a19.95 19.95 0 0 1-4.673-4.68l-1.704.457a5.503 5.503 0 0 1-6.734-3.886l-.78-2.91a5.493 5.493 0 0 1 3.894-6.73l1.701-.455a20.258 20.258 0 0 1 1.712-6.389l-1.245-1.246a5.507 5.507 0 0 1-.008-7.774l2.13-2.13a5.5 5.5 0 0 1 7.775.001l1.248 1.248c2-.914 4.157-1.502 6.387-1.717"/><path fill="#6b4fbb" d="M39.965 44.863a4 4 0 1 0 2.07-7.727 4 4 0 0 0-2.07 7.727m-1.036 3.864a8 8 0 1 1 4.142-15.455 8 8 0 0 1-4.142 15.455"/></g></g><path fill="#e5e5e5" fill-rule="nonzero" d="M144 169.541v30.01a4.002 4.002 0 0 0 4 3.995h20c2.209 0 4-1.789 4-3.995v-30.01a4.002 4.002 0 0 0-4-3.995h-20c-2.209 0-4 1.789-4 3.995m-4 0c0-4.416 3.583-7.995 8-7.995h20c4.416 0 8 3.584 8 7.995v30.01c0 4.416-3.583 7.995-8 7.995h-20c-4.416 0-8-3.584-8-7.995v-30.01"/><g fill="#fb722e" transform="translate(140 161)"><rect width="4" height="11" x="10" y="18.545" rx="2"/><rect width="4" height="11" x="21" y="18.545" rx="2"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="M445.16 245.34c-16.874-11.778-110.62-20.336-222.14-20.336-111.61 0-205.4 8.571-222.18 20.364a2 2 0 1 0 2.3 3.272c15.756-11.07 109.46-19.636 219.88-19.636 110.34 0 203.99 8.55 219.85 19.617a2.001 2.001 0 0 0 2.29-3.28"/></g></svg>
\ No newline at end of file

app/views/shared/empty_states/icons/_priority_labels.svg → app/assets/images/illustrations/priority_labels.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="116" height="68" viewBox="181 0 116 68"><g fill="none" fill-rule="evenodd" transform="translate(182)"><rect width="78" height="34" x="37" y="34" fill="#FAFAFA" rx="3"/><rect width="78" height="34" x="31" y="28" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="3"/><path fill="#FFF" stroke="#FC6D26" stroke-width="3" d="M34 35.8c-.6 0-1.4 0-1.8.4L29 38.8c-1 .7-1.7.4-2-.7l-.6-4c0-.5-.5-1.2-1-1.5L22 30.2c-1-.6-1-1.5 0-2l3.7-2c.5-.2 1-.8 1.2-1.3l1-4.2c.3-1 1-1.3 2-.5l3 3c.3.3 1 .6 1.6.6l4.2-.3c1 0 1.5.7 1 1.7L38 29c-.3.6-.3 1.4 0 2l1.3 3.8c.4 1 0 1.8-1.2 1.6l-4-.6z" stroke-linecap="round"/><path fill="#FDE5D8" d="M51.6 14.3c-.2-.2-.8-.4-1-.3l-2.8.5c-.7 0-1-.4-.8-1l1-2.8V9.5L46.6 7c-.3-.7 0-1.2.8-1h2.7c.3 0 .8-.2 1-.5l2-2c.6-.5 1-.4 1.3.3l.7 2.8c0 .3.4.8.7 1l2.3 1.2c.7.3.7 1 0 1.3l-2.2 1.7-.6 1-.4 3c-.2.6-.7.8-1.3.4l-2-1.7zM5.4 43.2c-.2-.2-.5-.2-.7-.2l-1.8.3c-.6 0-1-.2-.7-.7l.7-1.8V40l-1-1.7c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L6.5 36c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2zM10.4 9.2C10.2 9 10 9 9.7 9L8 9.3c-.6 0-1-.2-.7-.7L8 6.8V6L7 4.3c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L11.5 2c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2z"/><rect width="52" height="4" x="43" y="38" fill="#EEE" rx="2"/><rect width="36" height="4" x="43" y="48" fill="#EEE" rx="2"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="116" height="68" viewBox="181 0 116 68"><g fill="none" fill-rule="evenodd" transform="translate(182)"><rect width="78" height="34" x="37" y="34" fill="#FAFAFA" rx="3"/><rect width="78" height="34" x="31" y="28" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="3"/><path fill="#FFF" stroke="#FC6D26" stroke-width="3" d="M34 35.8c-.6 0-1.4 0-1.8.4L29 38.8c-1 .7-1.7.4-2-.7l-.6-4c0-.5-.5-1.2-1-1.5L22 30.2c-1-.6-1-1.5 0-2l3.7-2c.5-.2 1-.8 1.2-1.3l1-4.2c.3-1 1-1.3 2-.5l3 3c.3.3 1 .6 1.6.6l4.2-.3c1 0 1.5.7 1 1.7L38 29c-.3.6-.3 1.4 0 2l1.3 3.8c.4 1 0 1.8-1.2 1.6l-4-.6z" stroke-linecap="round"/><path fill="#FDE5D8" d="M51.6 14.3c-.2-.2-.8-.4-1-.3l-2.8.5c-.7 0-1-.4-.8-1l1-2.8V9.5L46.6 7c-.3-.7 0-1.2.8-1h2.7c.3 0 .8-.2 1-.5l2-2c.6-.5 1-.4 1.3.3l.7 2.8c0 .3.4.8.7 1l2.3 1.2c.7.3.7 1 0 1.3l-2.2 1.7-.6 1-.4 3c-.2.6-.7.8-1.3.4l-2-1.7zM5.4 43.2c-.2-.2-.5-.2-.7-.2l-1.8.3c-.6 0-1-.2-.7-.7l.7-1.8V40l-1-1.7c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L6.5 36c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2zm5-34C10.2 9 10 9 9.7 9L8 9.3c-.6 0-1-.2-.7-.7L8 6.8V6L7 4.3c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L11.5 2c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2z"/><rect width="52" height="4" x="43" y="38" fill="#EEE" rx="2"/><rect width="36" height="4" x="43" y="48" fill="#EEE" rx="2"/></g></svg>
\ No newline at end of file

app/assets/images/illustrations/todos_all_done.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" fill="#FFF" stroke="#EEE" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>
\ No newline at end of file

app/assets/images/illustrations/todos_empty.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 337" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="180" height="220" x="66.2" y="74.4" rx="6"/><mask id="l" width="180" height="220" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><rect id="b" width="180" height="220" rx="6"/><mask id="m" width="180" height="220" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask><rect id="c" width="28" height="28" rx="4"/><mask id="n" width="28" height="28" x="0" y="0" fill="#fff"><use xlink:href="#c"/></mask><rect id="d" width="28" height="28" rx="4"/><mask id="o" width="28" height="28" x="0" y="0" fill="#fff"><use xlink:href="#d"/></mask><circle id="e" cx="21.5" cy="21.5" r="21.5"/><mask id="p" width="43" height="43" x="0" y="0" fill="#fff"><use xlink:href="#e"/></mask><circle id="f" cx="26.5" cy="26.5" r="26.5"/><mask id="q" width="53" height="53" x="0" y="0" fill="#fff"><use xlink:href="#f"/></mask><circle id="g" cx="9.5" cy="4.5" r="4.5"/><mask id="r" width="13" height="13" x="-2" y="-2"><path fill="#fff" d="M3-2h13v13H3z"/><use xlink:href="#g"/></mask><circle id="h" cx="26.5" cy="26.5" r="26.5"/><mask id="s" width="53" height="53" x="0" y="0" fill="#fff"><use xlink:href="#h"/></mask><circle id="i" cx="21.5" cy="21.5" r="21.5"/><mask id="t" width="43" height="43" x="0" y="0" fill="#fff"><use xlink:href="#i"/></mask><path id="j" d="M18 38h15c10.5 0 19-8.5 19-19S43.5 0 33 0H19C8.5 0 0 8.5 0 19c0 6.3 3 12 7.8 15.3l5.2 9c.6 1 1.4 1 2 0l3-5.3z"/><mask id="u" width="52" height="44" x="0" y="0" fill="#fff"><use xlink:href="#j"/></mask><circle id="k" cx="18.5" cy="18.5" r="18.5"/><mask id="v" width="37" height="37" x="0" y="0" fill="#fff"><use xlink:href="#k"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(-6 -4)"><use stroke="#EEE" stroke-width="6" mask="url(#l)" transform="rotate(-5 156.245 184.425)" xlink:href="#a"/><g transform="rotate(5 -707.333 618.042)"><use fill="#FFF" stroke="#EEE" stroke-width="6" mask="url(#m)" xlink:href="#b"/><g transform="translate(29 24)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="86" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(29 69)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="86" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(28 160)"><use stroke="#E5E5E5" stroke-width="6" mask="url(#n)" opacity=".7" xlink:href="#c"/><rect width="26" height="3" x="41" y="7" fill="#ECECEC" rx="1.5"/><rect width="43" height="3" x="41" y="17" fill="#ECECEC" rx="1.5"/></g><g transform="translate(28 116)"><use stroke="#E5E5E5" stroke-width="6" mask="url(#o)" xlink:href="#d"/><rect width="86" height="3" x="41" y="7" fill="#E5E5E5" rx="1.5"/><rect width="43" height="3" x="41" y="17" fill="#E5E5E5" rx="1.5"/></g></g><g transform="rotate(-15 601.917 -782.362)"><use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#p)" xlink:href="#e"/><text fill="#6B4FBB" font-family="SourceSansPro-Black, Source Sans Pro" font-size="20" font-weight="700" letter-spacing="-.1"><tspan x="12" y="27">@</tspan></text></g><g transform="rotate(15 -686.59 1035.907)"><use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#q)" xlink:href="#f"/><path fill="#FC6D26" d="M26.5 38.2c3.3 0 9.5-2.5 9.5-9.6 0-7-2.4-6.6-9.5-6.6-7 0-9.5-.4-9.5 6.6s6.2 9.6 9.5 9.6z"/><g transform="translate(17 14)"><use fill="#FC6D26" xlink:href="#g"/><use stroke="#FFF" stroke-width="4" mask="url(#r)" xlink:href="#g"/></g></g><g transform="rotate(15 -85.125 65.185)"><use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#s)" xlink:href="#h"/><path fill="#6B4FBB" d="M24 18.5c0-1.4 1-2.5 2.5-2.5 1.4 0 2.5 1 2.5 2.5v9c0 1.4-1 2.5-2.5 2.5-1.4 0-2.5-1-2.5-2.5v-9zM26.5 37c1.4 0 2.5-1 2.5-2.5 0-1.4-1-2.5-2.5-2.5-1.4 0-2.5 1-2.5 2.5 0 1.4 1 2.5 2.5 2.5z"/></g><g transform="rotate(-15 716.492 78.873)"><use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#t)" xlink:href="#i"/><path fill="#FC6D26" d="M20 23v-3h3v3h-3zm0 3v1.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-2.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-3h-1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-2.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h3v-1.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v3h1.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v2.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-3z"/></g><g transform="rotate(-15 129.114 -585.74)"><use stroke="#FDE5D8" stroke-width="6" mask="url(#u)" xlink:href="#j"/><circle cx="16" cy="20" r="2" fill="#FC6D26"/><circle cx="27" cy="20" r="2" fill="#FC6D26"/><circle cx="38" cy="20" r="2" fill="#FC6D26"/></g><g transform="rotate(-15 1254.8 -458.986)"><use stroke="#FDE5D8" stroke-width="6" mask="url(#v)" xlink:href="#k"/><path fill="#FC6D26" d="M10.6 19l2-2c.5-.5.5-1 0-1.5-.3-.4-1-.4-1.3 0l-2.8 2.8c-.2.2-.3.4-.3.7 0 .3 0 .5.3.7l2.8 2.8c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-2-2zm14.8 0l-2-2c-.5-.5-.5-1 0-1.5.3-.4 1-.4 1.3 0l2.8 2.8c.2.2.3.4.3.7 0 .3 0 .5-.3.7l-2.8 2.8c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l2-2z"/><rect width="2" height="7" x="17" y="15.1" fill="#FC6D26" opacity=".5" transform="rotate(15 18.002 18.64)" rx="1"/></g></g></svg>
\ No newline at end of file

app/assets/javascripts/boards/components/modal/empty_state.js

@@ -8,11 +8,11 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
     return ModalStore.store;
   },
   props: {
-    image: {
+    newIssuePath: {
       type: String,
       required: true,
     },
-    newIssuePath: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -42,7 +42,7 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
     <section class="empty-state">
       <div class="row">
         <div class="col-xs-12 col-sm-6 col-sm-push-6">
-          <aside class="svg-content" v-html="image"></aside>
+          <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
         </div>
         <div class="col-xs-12 col-sm-6 col-sm-pull-6">
           <div class="text-content">

app/assets/javascripts/boards/components/modal/index.js

@@ -12,11 +12,11 @@ const ModalStore = gl.issueBoards.ModalStore;
 
 gl.issueBoards.IssuesModal = Vue.extend({
   props: {
-    blankStateImage: {
+    newIssuePath: {
       type: String,
       required: true,
     },
-    newIssuePath: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -150,14 +150,14 @@ gl.issueBoards.IssuesModal = Vue.extend({
           :label-path="labelPath">
         </modal-header>
         <modal-list
-          :image="blankStateImage"
           :issue-link-base="issueLinkBase"
           :root-path="rootPath"
+          :empty-state-svg="emptyStateSvg"
           v-if="!loading && showList && !filterLoading"></modal-list>
         <empty-state
           v-if="showEmptyState"
-          :image="blankStateImage"
-          :new-issue-path="newIssuePath"></empty-state>
+          :new-issue-path="newIssuePath"
+          :empty-state-svg="emptyStateSvg"></empty-state>
         <section
           class="add-issues-list text-center"
           v-if="loading || filterLoading">

app/assets/javascripts/boards/components/modal/list.js

@@ -15,7 +15,7 @@ gl.issueBoards.ModalList = Vue.extend({
       type: String,
       required: true,
     },
-    image: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -119,8 +119,8 @@ gl.issueBoards.ModalList = Vue.extend({
         class="empty-state add-issues-empty-state-filter text-center"
         v-if="issuesCount > 0 && issues.length === 0">
         <div
-          class="svg-content"
-          v-html="image">
+          class="svg-content">
+          <img :src="emptyStateSvg"/>
         </div>
         <div class="text-content">
           <h4>

app/assets/javascripts/commit/pipelines/pipelines_bundle.js

@@ -35,6 +35,8 @@ document.addEventListener('DOMContentLoaded', () => {
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
+          errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
           autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -17,6 +17,14 @@
         type: String,
         required: true,
       },
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      errorStateSvgPath: {
+        type: String,
+        required: true,
+      },
     },
     mixins: [
       pipelinesMixin,
@@ -87,10 +95,12 @@
     <empty-state
       v-if="shouldRenderEmptyState"
       :help-page-path="helpPagePath"
+      :empty-state-svg-path="emptyStateSvgPath"
       />
 
     <error-state
       v-if="shouldRenderErrorState"
+      :error-state-svg-path="errorStateSvgPath"
       />
 
     <div

app/assets/javascripts/help/help.js

+// We will render the icons list here
+if ($('#user-content-gitlab-icons').length > 0) {
+  const $iconsHeader = $('#user-content-gitlab-icons');
+  const $iconsList = $('<div id="iconsList">ICONS</div>');
+  $($iconsList).insertAfter($iconsHeader.parent());
+}

app/assets/javascripts/lib/utils/common_utils.js

@@ -408,6 +408,10 @@ export const setCiStatusFavicon = (pageUrl) => {
   });
 };
 
+export const spriteIcon = icon => `<svg><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
+
+export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),
@@ -434,4 +438,6 @@ window.gl.utils = {
   getSelectedFragment,
   insertText,
   nodeMatchesSelector,
+  spriteIcon,
+  imagePath,
 };

app/assets/javascripts/main.js

@@ -8,6 +8,7 @@ import _ from 'underscore';
 import Cookies from 'js-cookie';
 import Dropzone from 'dropzone';
 import Sortable from 'vendor/Sortable';
+import svg4everybody from 'svg4everybody';
 
 // libraries with import side-effects
 import 'mousetrap';
@@ -151,6 +152,8 @@ if (process.env.NODE_ENV !== 'production') require('./test_utils/');
 
 Dropzone.autoDiscover = false;
 
+svg4everybody();
+
 document.addEventListener('beforeunload', function () {
   // Unbind scroll events
   $(document).off('scroll');

app/assets/javascripts/merge_request_tabs.js

@@ -248,6 +248,8 @@ import {
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
+          errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
           autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -23,6 +23,9 @@
         settingsPath: metricsData.settingsPath,
         metricsEndpoint: metricsData.additionalMetrics,
         deploymentEndpoint: metricsData.deploymentEndpoint,
+        emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
+        emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath,
+        emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath,
         showEmptyState: true,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
@@ -109,5 +112,8 @@
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
+    :empty-getting-started-svg-path="emptyGettingStartedSvgPath"
+    :empty-loading-svg-path="emptyLoadingSvgPath"
+    :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
   />
 </template>

app/assets/javascripts/monitoring/components/empty_state.vue

 <script>
-  import gettingStartedSvg from 'empty_states/monitoring/_getting_started.svg';
-  import loadingSvg from 'empty_states/monitoring/_loading.svg';
-  import unableToConnectSvg from 'empty_states/monitoring/_unable_to_connect.svg';
-
   export default {
     props: {
       documentationPath: {
@@ -18,24 +14,36 @@
         type: String,
         required: true,
       },
+      emptyGettingStartedSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyLoadingSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyUnableToConnectSvgPath: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
         states: {
           gettingStarted: {
-            svg: gettingStartedSvg,
+            svgUrl: this.emptyGettingStartedSvgPath,
             title: 'Get started with performance monitoring',
             description: 'Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments.',
             buttonText: 'Configure Prometheus',
           },
           loading: {
-            svg: loadingSvg,
+            svgUrl: this.emptyLoadingSvgPath,
             title: 'Waiting for performance data',
             description: 'Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.',
             buttonText: 'View documentation',
           },
           unableToConnect: {
-            svg: unableToConnectSvg,
+            svgUrl: this.emptyUnableToConnectSvgPath,
             title: 'Unable to connect to Prometheus server',
             description: 'Ensure connectivity is available from the GitLab server to the ',
             buttonText: 'View documentation',
@@ -66,7 +74,9 @@
 <template>
   <div class="prometheus-state">
     <div class="row">
-      <div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div>
+      <div class="col-md-4 col-md-offset-4 state-svg svg-content">
+        <img :src="currentState.svgUrl"/>
+      </div>
     </div>
     <div class="row">
       <div class="col-md-6 col-md-offset-3">

app/assets/javascripts/notes/components/issue_note_icons.js

-import iconArrowCircle from 'icons/_icon_arrow_circle_o_right.svg';
-import iconCheck from 'icons/_icon_check_square_o.svg';
-import iconClock from 'icons/_icon_clock_o.svg';
-import iconCodeFork from 'icons/_icon_code_fork.svg';
-import iconComment from 'icons/_icon_comment_o.svg';
-import iconCommit from 'icons/_icon_commit.svg';
-import iconEdit from 'icons/_icon_edit.svg';
-import iconEye from 'icons/_icon_eye.svg';
-import iconEyeSlash from 'icons/_icon_eye_slash.svg';
-import iconMerge from 'icons/_icon_merge.svg';
-import iconMerged from 'icons/_icon_merged.svg';
-import iconRandom from 'icons/_icon_random.svg';
-import iconClosed from 'icons/_icon_status_closed.svg';
-import iconStatusOpen from 'icons/_icon_status_open.svg';
-import iconStopwatch from 'icons/_icon_stopwatch.svg';
-import iconTags from 'icons/_icon_tags.svg';
-import iconUser from 'icons/_icon_user.svg';
-
-export default {
-  icon_arrow_circle_o_right: iconArrowCircle,
-  icon_check_square_o: iconCheck,
-  icon_clock_o: iconClock,
-  icon_code_fork: iconCodeFork,
-  icon_comment_o: iconComment,
-  icon_commit: iconCommit,
-  icon_edit: iconEdit,
-  icon_eye: iconEye,
-  icon_eye_slash: iconEyeSlash,
-  icon_merge: iconMerge,
-  icon_merged: iconMerged,
-  icon_random: iconRandom,
-  icon_status_closed: iconClosed,
-  icon_status_open: iconStatusOpen,
-  icon_stopwatch: iconStopwatch,
-  icon_tags: iconTags,
-  icon_user: iconUser,
-};

app/assets/javascripts/notes/components/issue_system_note.vue

 <script>
   import { mapGetters } from 'vuex';
-  import iconsMap from './issue_note_icons';
   import issueNoteHeader from './issue_note_header.vue';
 
   export default {
@@ -24,9 +23,9 @@
       isTargetNote() {
         return this.targetNoteHash === this.noteAnchorId;
       },
-    },
-    created() {
-      this.svg = iconsMap[this.note.system_note_icon_name];
+      iconHtml() {
+        return gl.utils.spriteIcon(this.note.system_note_icon_name);
+      },
     },
   };
 </script>
@@ -39,7 +38,7 @@
     <div class="timeline-entry-inner">
       <div
         class="timeline-icon"
-        v-html="svg">
+        v-html="iconHtml">
       </div>
       <div class="timeline-content">
         <div class="note-header">

app/assets/javascripts/pipelines/components/empty_state.vue

 <script>
-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
 export default {
   props: {
     helpPagePath: {
       type: String,
       required: true,
     },
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
   },
-  data: () => ({ pipelinesEmptyStateSVG }),
 };
 </script>
 
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+      <div class="svg-content">
+        <img :src="emptyStateSvgPath"/>
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">

app/assets/javascripts/pipelines/components/error_state.vue

 <script>
-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
 export default {
-  data: () => ({ pipelinesErrorStateSVG }),
+  props: {
+    errorStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
 <template>
   <div class="row empty-state js-pipelines-error-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+      <div class="svg-content">
+        <img :src="errorStateSvgPath"/>
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -27,6 +27,8 @@
       return {
         endpoint: pipelinesData.endpoint,
         helpPagePath: pipelinesData.helpPagePath,
+        emptyStateSvgPath: pipelinesData.emptyStateSvgPath,
+        errorStateSvgPath: pipelinesData.errorStateSvgPath,
         autoDevopsPath: pipelinesData.helpAutoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
@@ -182,9 +184,13 @@
       <empty-state
         v-if="shouldRenderEmptyState"
         :help-page-path="helpPagePath"
+        :empty-state-svg-path="emptyStateSvgPath"
         />
 
-      <error-state v-if="shouldRenderErrorState" />
+      <error-state 
+        v-if="shouldRenderErrorState"
+        :error-state-svg-path="errorStateSvgPath"
+        />
 
       <div
         class="blank-state blank-state-no-icon"

app/assets/stylesheets/framework/blocks.scss

@@ -319,16 +319,6 @@
     padding: $gl-padding;
   }
 
-  .svg-content {
-    text-align: center;
-
-    svg {
-      max-width: 425px;
-      width: 100%;
-      padding: $gl-padding;
-    }
-  }
-
   .emoji-icon {
     display: inline-block;
   }

app/assets/stylesheets/framework/images.scss

@@ -9,3 +9,27 @@
   padding: 10px;
   margin-bottom: 10px;
 }
+
+.svg-content {
+  text-align: center;
+  padding: $gl-padding;
+
+  svg,
+  img {
+    max-width: 425px;
+    width: 100%;
+  }
+}
+
+@mixin svg-size($size) {
+  width: $size;
+  height: $size;
+}
+
+svg {
+  &.s16 { @include svg-size(16px); }
+  &.s24 { @include svg-size(24px); }
+  &.s32 { @include svg-size(32px); }
+  &.s48 { @include svg-size(48px); }
+  &.s72 { @include svg-size(72px); }
+}

app/helpers/appearances_helper.rb

@@ -30,10 +30,4 @@ module AppearancesHelper
       render 'shared/logo.svg'
     end
   end
-
-  def custom_icon(icon_name, size: 16)
-    # We can't simply do the below, because there are some .erb SVGs.
-    #  File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
-    render "shared/icons/#{icon_name}.svg", size: size
-  end
 end

app/helpers/icons_helper.rb

@@ -17,6 +17,18 @@ module IconsHelper
     options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
   end
 
+  def custom_icon(icon_name, size: 16)
+    # We can't simply do the below, because there are some .erb SVGs.
+    #  File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
+    render "shared/icons/#{icon_name}.svg", size: size
+  end
+
+  def sprite_icon(icon_name, size: nil, css_class: nil)
+    css_classes = size ? "s#{size}" : nil
+    css_classes << " #{css_class}" unless css_class.blank?
+    content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes)
+  end
+
   def audit_icon(names, options = {})
     case names
     when "standard"

app/helpers/system_note_helper.rb

 module SystemNoteHelper
   ICON_NAMES_BY_ACTION = {
-    'commit' => 'icon_commit',
-    'description' => 'icon_edit',
-    'merge' => 'icon_merge',
-    'merged' => 'icon_merged',
-    'opened' => 'icon_status_open',
-    'closed' => 'icon_status_closed',
-    'time_tracking' => 'icon_stopwatch',
-    'assignee' => 'icon_user',
-    'title' => 'icon_edit',
-    'task' => 'icon_check_square_o',
-    'label' => 'icon_tags',
-    'cross_reference' => 'icon_random',
-    'branch' => 'icon_code_fork',
-    'confidential' => 'icon_eye_slash',
-    'visible' => 'icon_eye',
-    'milestone' => 'icon_clock_o',
-    'discussion' => 'icon_comment_o',
-    'moved' => 'icon_arrow_circle_o_right',
-    'outdated' => 'icon_edit',
-    'duplicate' => 'icon_clone'
+    'commit' => 'commit',
+    'description' => 'pencil',
+    'merge' => 'git-merge',
+    'merged' => 'git-merge',
+    'opened' => 'issue-open',
+    'closed' => 'issue-close',
+    'time_tracking' => 'timer',
+    'assignee' => 'user',
+    'title' => 'pencil',
+    'task' => 'task-done',
+    'label' => 'label',
+    'cross_reference' => 'comment-dots',
+    'branch' => 'fork',
+    'confidential' => 'eye-slash',
+    'visible' => 'eye',
+    'milestone' => 'clock',
+    'discussion' => 'comment',
+    'moved' => 'arrow-right',
+    'outdated' => 'pencil',
+    'duplicate' => 'issue-duplicate'
   }.freeze
 
   def system_note_icon_name(note)
@@ -28,7 +28,7 @@ module SystemNoteHelper
 
   def icon_for_system_note(note)
     icon_name = system_note_icon_name(note)
-    custom_icon(icon_name) if icon_name
+    sprite_icon(icon_name) if icon_name
   end
 
   extend self

app/views/dashboard/todos/index.html.haml

@@ -77,13 +77,14 @@
           %ul.content-list.todos-list
             = render @todos
       = paginate @todos, theme: "gitlab"
-    .js-nothing-here-container.todos-all-done.hidden
-      = render "shared/empty_states/icons/todos_all_done.svg"
+    .js-nothing-here-container.todos-all-done.hidden.svg-content
+      = image_tag 'illustrations/todos_all_done.svg'
       %h4.text-center
         You're all done!
   - elsif current_user.todos.any?
     .todos-all-done
-      = render "shared/empty_states/icons/todos_all_done.svg"
+      .svg-content
+        = image_tag 'illustrations/todos_all_done.svg'
       - if todos_filter_empty?
         %h4.text-center
           = Gitlab.config.gitlab.no_todos_messages.sample
@@ -99,8 +100,8 @@
           There are no todos to show.
   - else
     .todos-empty
-      .todos-empty-hero
-        = render "shared/empty_states/icons/todos_empty.svg"
+      .todos-empty-hero.svg-content
+        = image_tag 'illustrations/todos_empty.svg'
       .todos-empty-content
         %h4
           Todos let you see what you should do next.

app/views/help/show.html.haml

+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag 'help'
 - page_title @path.split("/").reverse.map(&:humanize)
 .documentation.wiki.prepend-top-default
   = markdown @markdown

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -9,7 +9,7 @@
       = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: {class: 'home'}) do
         = link_to admin_root_path, class: 'shortcuts-tree' do
           .nav-icon-container
-            = custom_icon('overview')
+            = sprite_icon('overview')
           %span.nav-item-name
             Overview
 
@@ -55,7 +55,7 @@
       = nav_link(controller: %w(system_info background_jobs logs health_check requests_profiles)) do
         = link_to admin_system_info_path do
           .nav-icon-container
-            = custom_icon('monitoring')
+            = sprite_icon('monitor')
           %span.nav-item-name
             Monitoring
 
@@ -89,7 +89,7 @@
       = nav_link(controller: :broadcast_messages) do
         = link_to admin_broadcast_messages_path do
           .nav-icon-container
-            = custom_icon('messages')
+            = sprite_icon('messages')
           %span.nav-item-name
             Messages
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -101,7 +101,7 @@
       = nav_link(controller: [:hooks, :hook_logs]) do
         = link_to admin_hooks_path do
           .nav-icon-container
-            = custom_icon('system_hooks')
+            = sprite_icon('hook')
           %span.nav-item-name
             System Hooks
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -113,7 +113,7 @@
       = nav_link(controller: :applications) do
         = link_to admin_applications_path do
           .nav-icon-container
-            = custom_icon('applications')
+            = sprite_icon('applications')
           %span.nav-item-name
             Applications
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -125,7 +125,7 @@
       = nav_link(controller: :abuse_reports) do
         = link_to admin_abuse_reports_path do
           .nav-icon-container
-            = custom_icon('abuse_reports')
+            = sprite_icon('slight-frown')
           %span.nav-item-name
             Abuse Reports
           %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
@@ -140,7 +140,7 @@
         = nav_link(controller: :spam_logs) do
           = link_to admin_spam_logs_path do
             .nav-icon-container
-              = custom_icon('spam_logs')
+              = sprite_icon('spam')
             %span.nav-item-name
               Spam Logs
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -152,7 +152,7 @@
       = nav_link(controller: :deploy_keys) do
         = link_to admin_deploy_keys_path do
           .nav-icon-container
-            = custom_icon('key')
+            = sprite_icon('key')
           %span.nav-item-name
             Deploy Keys
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -164,7 +164,7 @@
       = nav_link(controller: :services) do
         = link_to admin_application_settings_services_path do
           .nav-icon-container
-            = custom_icon('service_templates')
+            = sprite_icon('template')
           %span.nav-item-name
             Service Templates
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -176,7 +176,7 @@
       = nav_link(controller: :labels) do
         = link_to admin_labels_path do
           .nav-icon-container
-            = custom_icon('labels')
+            = sprite_icon('labels')
           %span.nav-item-name
             Labels
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -188,7 +188,7 @@
       = nav_link(controller: :appearances) do
         = link_to admin_appearances_path do
           .nav-icon-container
-            = custom_icon('appearance')
+            = sprite_icon('appearance')
           %span.nav-item-name
             Appearance
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -200,7 +200,7 @@
       = nav_link(controller: :application_settings) do
         = link_to admin_application_settings_path do
           .nav-icon-container
-            = custom_icon('settings')
+            = sprite_icon('settings')
           %span.nav-item-name
             Settings
         %ul.sidebar-sub-level-items.is-fly-out-only

app/views/layouts/nav/sidebar/_group.html.haml

@@ -13,7 +13,7 @@
       = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
         = link_to group_path(@group) do
           .nav-icon-container
-            = custom_icon('project')
+            = sprite_icon('project')
           %span.nav-item-name
             Overview
 
@@ -36,7 +36,7 @@
       = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index']) do
         = link_to issues_group_path(@group) do
           .nav-icon-container
-            = custom_icon('issues')
+            = sprite_icon('issues')
           %span.nav-item-name
             Issues
           %span.badge.count= number_with_delimiter(issues.count)
@@ -66,7 +66,7 @@
       = nav_link(path: 'groups#merge_requests') do
         = link_to merge_requests_group_path(@group) do
           .nav-icon-container
-            = custom_icon('mr_bold')
+            = sprite_icon('git-merge')
           %span.nav-item-name
             Merge Requests
           %span.badge.count= number_with_delimiter(merge_requests.count)
@@ -79,7 +79,7 @@
       = nav_link(path: 'group_members#index') do
         = link_to group_group_members_path(@group) do
           .nav-icon-container
-            = custom_icon('members')
+            = sprite_icon('users')
           %span.nav-item-name
             Members
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -91,7 +91,7 @@
         = nav_link(path: %w[groups#projects groups#edit ci_cd#show]) do
           = link_to edit_group_path(@group) do
             .nav-icon-container
-              = custom_icon('settings')
+              = sprite_icon('settings')
             %span.nav-item-name
               Settings
           %ul.sidebar-sub-level-items

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -9,7 +9,7 @@
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
         = link_to profile_path do
           .nav-icon-container
-            = custom_icon('profile')
+            = sprite_icon('profile')
           %span.nav-item-name
             Profile
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -20,7 +20,7 @@
       = nav_link(controller: [:accounts, :two_factor_auths]) do
         = link_to profile_account_path do
           .nav-icon-container
-            = custom_icon('account')
+            = sprite_icon('account')
           %span.nav-item-name
             Account
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -32,7 +32,7 @@
         = nav_link(controller: 'oauth/applications') do
           = link_to applications_profile_path do
             .nav-icon-container
-              = custom_icon('applications')
+              = sprite_icon('applications')
             %span.nav-item-name
               Applications
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -43,7 +43,7 @@
       = nav_link(controller: :chat_names) do
         = link_to profile_chat_names_path do
           .nav-icon-container
-            = custom_icon('chat')
+            = sprite_icon('comment')
           %span.nav-item-name
             Chat
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -54,7 +54,7 @@
       = nav_link(controller: :personal_access_tokens) do
         = link_to profile_personal_access_tokens_path do
           .nav-icon-container
-            = custom_icon('access_tokens')
+            = sprite_icon('token')
           %span.nav-item-name
             Access Tokens
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -65,7 +65,7 @@
       = nav_link(controller: :emails) do
         = link_to profile_emails_path do
           .nav-icon-container
-            = custom_icon('emails')
+            = sprite_icon('mail')
           %span.nav-item-name
             Emails
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -77,7 +77,7 @@
         = nav_link(controller: :passwords) do
           = link_to edit_profile_password_path do
             .nav-icon-container
-              = custom_icon('lock')
+              = sprite_icon('lock')
             %span.nav-item-name
               Password
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -88,7 +88,7 @@
       = nav_link(controller: :notifications) do
         = link_to profile_notifications_path do
           .nav-icon-container
-            = custom_icon('notifications')
+            = sprite_icon('notifications')
           %span.nav-item-name
             Notifications
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -99,7 +99,7 @@
       = nav_link(controller: :keys) do
         = link_to profile_keys_path do
           .nav-icon-container
-            = custom_icon('key')
+            = sprite_icon('key')
           %span.nav-item-name
             SSH Keys
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -110,7 +110,7 @@
       = nav_link(controller: :gpg_keys) do
         = link_to profile_gpg_keys_path do
           .nav-icon-container
-            = custom_icon('key_2')
+            = sprite_icon('key-2')
           %span.nav-item-name
             GPG Keys
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -121,7 +121,7 @@
       = nav_link(controller: :preferences) do
         = link_to profile_preferences_path do
           .nav-icon-container
-            = custom_icon('preferences')
+            = sprite_icon('preferences')
           %span.nav-item-name
             Preferences
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -132,7 +132,7 @@
       = nav_link(path: 'profiles#audit_log') do
         = link_to audit_log_profile_path do
           .nav-icon-container
-            = custom_icon('authentication_log')
+            = sprite_icon('log')
           %span.nav-item-name
             Authentication log
         %ul.sidebar-sub-level-items.is-fly-out-only

app/views/layouts/nav/sidebar/_project.html.haml

@@ -11,7 +11,7 @@
       = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
         = link_to project_path(@project), class: 'shortcuts-project' do
           .nav-icon-container
-            = custom_icon('project')
+            = sprite_icon('project')
           %span.nav-item-name
             Overview
 
@@ -38,7 +38,7 @@
         = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network)) do
           = link_to project_tree_path(@project), class: 'shortcuts-tree' do
             .nav-icon-container
-              = custom_icon('doc_text')
+              = sprite_icon('doc_text')
             %span.nav-item-name
               Repository
 
@@ -84,7 +84,7 @@
         = nav_link(controller: %w[projects/registry/repositories]) do
           = link_to project_container_registry_index_path(@project), class: 'shortcuts-container-registry' do
             .nav-icon-container
-              = custom_icon('container_registry')
+              = sprite_icon('disk')
             %span.nav-item-name
               Registry
 
@@ -92,7 +92,7 @@
         = nav_link(controller: @project.issues_enabled? ? [:issues, :labels, :milestones, :boards] : :issues) do
           = link_to project_issues_path(@project), class: 'shortcuts-issues' do
             .nav-icon-container
-              = custom_icon('issues')
+              = sprite_icon('issues')
             %span.nav-item-name
               Issues
             - if @project.issues_enabled?
@@ -132,7 +132,7 @@
         = nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :labels, :milestones]) do
           = link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests' do
             .nav-icon-container
-              = custom_icon('mr_bold')
+              = sprite_icon('git-merge')
             %span.nav-item-name
               Merge Requests
             %span.badge.count.merge_counter.js-merge-counter
@@ -149,7 +149,7 @@
         = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts]) do
           = link_to project_pipelines_path(@project), class: 'shortcuts-pipelines' do
             .nav-icon-container
-              = custom_icon('pipeline')
+              = sprite_icon('pipeline')
             %span.nav-item-name
               CI / CD
 
@@ -193,7 +193,7 @@
         = nav_link(controller: :wikis) do
           = link_to get_project_wiki_path(@project), class: 'shortcuts-wiki' do
             .nav-icon-container
-              = custom_icon('wiki')
+              = sprite_icon('book')
             %span.nav-item-name
               Wiki
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -206,7 +206,7 @@
         = nav_link(controller: :snippets) do
           = link_to project_snippets_path(@project), class: 'shortcuts-snippets' do
             .nav-icon-container
-              = custom_icon('snippets')
+              = sprite_icon('snippet')
             %span.nav-item-name
               Snippets
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -219,7 +219,7 @@
         = nav_link(path: %w[projects#edit project_members#index integrations#show services#edit repository#show ci_cd#show pages#show]) do
           = link_to edit_project_path(@project), class: 'shortcuts-tree' do
             .nav-icon-container
-              = custom_icon('settings')
+              = sprite_icon('settings')
             %span.nav-item-name
               Settings
 
@@ -263,7 +263,7 @@
         = nav_link(path: %w[members#show]) do
           = link_to project_settings_members_path(@project), title: 'Members', class: 'shortcuts-tree' do
             .nav-icon-container
-              = custom_icon('members')
+              = sprite_icon('users')
             %span.nav-item-name
               Members
 

app/views/projects/commit/_pipelines_list.haml

@@ -3,6 +3,8 @@
   endpoint: endpoint,
   "help-page-path" => help_page_path('ci/quick_start/README'),
   "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+  "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
+  "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
 } }
 
 - content_for :page_specific_javascripts do

app/views/projects/environments/metrics.html.haml

@@ -16,6 +16,9 @@
 
   #prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
+    "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started'),
+    "empty-loading-svg-path": image_path('illustrations/monitoring/loading'),
+    "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect'),
     "additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
     "has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } }
 

app/views/projects/pipelines/index.html.haml

@@ -5,10 +5,11 @@
 %div{ 'class' => container_class }
   - if show_auto_devops_callout?(@project)
     = render 'shared/auto_devops_callout'
-
   #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
     "help-page-path" => help_page_path('ci/quick_start/README'),
     "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+    "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
+    "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
     "new-pipeline-path" => new_project_pipeline_path(@project),
     "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
     "all-path" =>  project_pipelines_path(@project),
@@ -17,7 +18,7 @@
     "finished-path" => project_pipelines_path(@project, scope: :finished),
     "branches-path" => project_pipelines_path(@project, scope: :branches),
     "tags-path" => project_pipelines_path(@project, scope: :tags),
-    "has-ci" => @project.has_ci?,
+    "has-ci" => @repository.gitlab_ci_yml,
     "ci-lint-path" => ci_lint_path } }
 
   = page_specific_javascript_bundle_tag('common_vue')

app/views/shared/boards/_show.html.haml

@@ -31,10 +31,10 @@
       ":board-id" => "boardId",
       ":key" => "_uid" }
   = render "shared/boards/components/sidebar"
-  %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
-    "new-issue-path" => new_project_issue_path(@project),
+  %board-add-issues-modal{ "new-issue-path" => new_project_issue_path(@project),
     "milestone-path" => milestones_filter_dropdown_path,
     "label-path" => labels_filter_path,
+    "empty-state-svg" => image_path('illustrations/issues.svg'),
     ":issue-link-base" => "issueLinkBase",
     ":root-path" => "rootPath",
     ":project-id" => @project.try(:id) }

app/views/shared/empty_states/_issues.html.haml

@@ -5,7 +5,7 @@
 .row.empty-state
   .col-xs-12
     .svg-content
-      = render 'shared/empty_states/icons/issues.svg'
+      = image_tag 'illustrations/issues.svg'
   .col-xs-12.text-center
     .text-content
       - if has_button && current_user

app/views/shared/empty_states/_labels.html.haml

 .row.empty-state.labels
   .col-xs-12
     .svg-content
-      = render 'shared/empty_states/icons/labels.svg'
+      = image_tag 'illustrations/labels.svg'
   .col-xs-12.text-center
     .text-content
       %h4 Labels can be applied to issues and merge requests to categorize them.

app/views/shared/empty_states/_merge_requests.html.haml

@@ -5,7 +5,7 @@
 .row.empty-state.merge-requests
   .col-xs-12
     .svg-content
-      = render 'shared/empty_states/icons/merge_requests.svg'
+      = image_tag 'illustrations/merge_requests.svg'
   .col-xs-12.text-center
     .text-content
       - if has_button

app/views/shared/empty_states/_priority_labels.html.haml

 .text-center
-  = render 'shared/empty_states/icons/priority_labels.svg'
+  .svg-content
+    = image_tag 'illustrations/priority_labels.svg'
   %p Star labels to start sorting by priority

app/views/shared/empty_states/icons/_pipelines_empty.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g transform="translate(0 102)"><g fill="#e5e5e5"><rect width="74" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g fill="#31af64" transform="translate(0 4)"><path fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="m64.82 76h33.18c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855c1.725 1.835 4.631 1.833 6.354 0l9.263-9.855"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26" transform="matrix(.70711-.70711.70711.70711 84.34 49.5)"/></g></svg>

app/views/shared/empty_states/icons/_pipelines_failed.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 249" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="0" d="m260.03 114h23.972v-.013c19.972-.53 36-16.887 36-36.987 0-20.435-16.565-37-37-37-.993 0-1.977.039-2.95.116-4.95-14.605-18.773-25.12-35.05-25.12-5.464 0-10.652 1.185-15.32 3.311-6.649-9.841-17.909-16.311-30.68-16.311-20.435 0-37 16.565-37 37 0 .701.019 1.397.058 2.088-16.11 3.999-28.06 18.561-28.06 35.912 0 20.435 16.565 37 37 37 .324 0 .646-.004.968-.012"/><ellipse id="2" cx="41" cy="41" rx="41" ry="41"/><mask id="1" width="186" height="112" x="0" y="0" fill="#fff"><use xlink:href="#0"/></mask><mask id="3" width="82" height="82" x="0" y="0" fill="#fff"><use xlink:href="#2"/></mask></defs><g fill="none" fill-rule="evenodd"><g transform="matrix(.86603.5-.5.86603 228.11 137.43)"><path stroke="#b5a7dd" stroke-width="4" d="m.445.161c15.89 10.636 34.998 16.839 55.55 16.839"/><g transform="translate(56 4)"><path fill="#fb722e" d="m16 8c0-1.105.902-2 2.01-2h7.983c1.109 0 2.01.888 2.01 2 0 1.105-.902 2-2.01 2h-7.983c-1.109 0-2.01-.888-2.01-2m0 10c0-1.105.902-2 2.01-2h7.983c1.109 0 2.01.888 2.01 2 0 1.105-.902 2-2.01 2h-7.983c-1.109 0-2.01-.888-2.01-2"/><path fill="#fde5d8" fill-rule="nonzero" d="m4 22h6c3.315 0 6-2.685 6-5.997v-6.01c0-3.315-2.684-5.997-6-5.997h-6v18m-4-18.992c0-1.661 1.343-3.01 2.994-3.01h7.01c5.523 0 10 4.47 10 9.997v6.01c0 5.521-4.476 9.997-10 9.997h-7.01c-1.654 0-2.994-1.343-2.994-3.01v-19.984"/></g></g><g fill-rule="nonzero" transform="translate(257)"><path fill="#e5e5e5" d="m3.597 18.747c5.611-9.09 15.519-14.747 26.403-14.747 17.12 0 31 13.879 31 31 0 7.02-2.34 13.685-6.58 19.1l3.149 2.466c4.786-6.111 7.431-13.639 7.431-21.565 0-19.33-15.67-35-35-35-12.286 0-23.476 6.384-29.808 16.647l3.404 2.1"/><g transform="matrix(.96593.25882-.25882.96593 15.98 9.578)"><path fill="#b5a7dd" d="m12.426 11.592l-2.142 1.768-3.664-2.116c-.186-.107-.43-.042-.543.154l-1.229 2.129c-.116.2-.052.438.138.547l3.658 2.112-.455 2.735c-.109.657-.165 1.327-.165 2.01 0 .678.055 1.348.165 2.01l.455 2.735-3.658 2.112c-.186.107-.251.351-.138.547l1.229 2.129c.116.2.353.264.543.154l3.664-2.116 2.142 1.768c1.036.855 2.205 1.533 3.462 2l2.6.972v4.225c0 .215.179.393.405.393h2.458c.231 0 .405-.174.405-.393v-4.225l2.6-.972c1.257-.47 2.426-1.147 3.462-2l2.142-1.768 3.664 2.116c.186.107.43.042.543-.154l1.229-2.129c.116-.2.052-.438-.138-.547l-3.658-2.112.455-2.735c.109-.657.165-1.327.165-2.01 0-.678-.055-1.348-.165-2.01l-.455-2.735 3.658-2.112c.186-.107.251-.351.138-.547l-1.229-2.129c-.116-.2-.353-.264-.543-.154l-3.664 2.116-2.142-1.768c-1.036-.855-2.205-1.533-3.462-2l-2.6-.972v-4.225c0-.215-.179-.393-.405-.393h-2.458c-.231 0-.405.174-.405.393v4.225l-2.6.972c-1.257.47-2.426 1.147-3.462 2m2.062-5.749v-1.45c0-2.426 1.963-4.393 4.405-4.393h2.458c2.433 0 4.405 1.967 4.405 4.393v1.45c1.689.631 3.243 1.538 4.608 2.665l1.259-.727c2.101-1.213 4.786-.497 6.01 1.618l1.229 2.129c1.216 2.107.499 4.798-1.602 6.01l-1.257.726c.144.866.219 1.755.219 2.662 0 .907-.075 1.796-.219 2.662l1.257.726c2.101 1.213 2.823 3.896 1.602 6.01l-1.229 2.129c-1.216 2.107-3.906 2.832-6.01 1.618l-1.259-.727c-1.365 1.127-2.92 2.034-4.608 2.665v1.45c0 2.426-1.963 4.393-4.405 4.393h-2.458c-2.433 0-4.405-1.967-4.405-4.393v-1.45c-1.689-.631-3.243-1.538-4.608-2.665l-1.259.727c-2.101 1.213-4.786.497-6.01-1.618l-1.229-2.129c-1.216-2.107-.499-4.798 1.602-6.01l1.257-.726c-.144-.866-.219-1.755-.219-2.662 0-.907.075-1.796.219-2.662l-1.257-.726c-2.101-1.213-2.823-3.896-1.602-6.01l1.229-2.129c1.216-2.107 3.906-2.832 6.01-1.618l1.259.727c1.365-1.127 2.92-2.034 4.608-2.665"/><path fill="#6b4fbb" d="m20.12 23.366c1.347 0 2.439-1.092 2.439-2.439 0-1.347-1.092-2.439-2.439-2.439-1.347 0-2.439 1.092-2.439 2.439 0 1.347 1.092 2.439 2.439 2.439m0 4c-3.556 0-6.439-2.883-6.439-6.439 0-3.556 2.883-6.439 6.439-6.439 3.556 0 6.439 2.883 6.439 6.439 0 3.556-2.883 6.439-6.439 6.439"/></g></g><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#1)" stroke-linejoin="round" xlink:href="#0"/><g transform="translate(175 58)"><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#3)" xlink:href="#2"/><g fill-rule="nonzero"><path fill="#e5e5e5" d="m41 78c20.435 0 37-16.565 37-37 0-20.435-16.565-37-37-37-20.435 0-37 16.565-37 37 0 20.435 16.565 37 37 37m0 4c-22.644 0-41-18.356-41-41 0-22.644 18.356-41 41-41 22.644 0 41 18.356 41 41 0 22.644-18.356 41-41 41"/><g transform="matrix(.96593.25882-.25882.96593 23.581 9.415)"><path fill="#b5a7dd" d="m14.821 13.655l-2.142 1.768-3.933-2.271c-.72-.416-1.634-.171-2.046.543l-1.507 2.61c-.409.708-.161 1.631.553 2.043l3.926 2.267-.455 2.735c-.145.869-.218 1.754-.218 2.65 0 .896.073 1.782.218 2.65l.455 2.735-3.926 2.267c-.72.416-.965 1.329-.553 2.043l1.507 2.61c.409.708 1.332.955 2.046.543l3.933-2.271 2.142 1.768c1.369 1.131 2.916 2.027 4.579 2.648l2.6.972v4.534c0 .831.669 1.5 1.493 1.5h3.01c.817 0 1.493-.676 1.493-1.5v-4.534l2.6-.972c1.663-.621 3.21-1.518 4.579-2.648l2.142-1.768 3.933 2.271c.72.416 1.634.171 2.046-.543l1.507-2.61c.409-.708.161-1.631-.553-2.043l-3.926-2.267.455-2.735c.145-.869.218-1.754.218-2.65 0-.896-.073-1.782-.218-2.65l-.455-2.735 3.926-2.267c.72-.416.965-1.329.553-2.043l-1.507-2.61c-.409-.708-1.332-.955-2.046-.543l-3.933 2.271-2.142-1.768c-1.369-1.131-2.916-2.027-4.579-2.648l-2.6-.972v-4.534c0-.831-.669-1.5-1.493-1.5h-3.01c-.817 0-1.493.676-1.493 1.5v4.534l-2.6.972c-1.663.621-3.21 1.518-4.579 2.648m3.179-6.395v-1.759c0-3.038 2.471-5.5 5.493-5.5h3.01c3.034 0 5.493 2.46 5.493 5.5v1.759c2.098.784 4.03 1.91 5.725 3.311l1.528-.882c2.631-1.519 5.999-.61 7.51 2.01l1.507 2.61c1.517 2.627.616 5.987-2.02 7.507l-1.525.881c.179 1.076.272 2.18.272 3.307 0 1.127-.093 2.231-.272 3.307l1.525.881c2.631 1.519 3.528 4.89 2.02 7.507l-1.507 2.61c-1.517 2.627-4.877 3.527-7.51 2.01l-1.528-.882c-1.696 1.401-3.627 2.527-5.725 3.311v1.759c0 3.038-2.471 5.5-5.493 5.5h-3.01c-3.034 0-5.493-2.46-5.493-5.5v-1.759c-2.098-.784-4.03-1.91-5.725-3.311l-1.528.882c-2.631 1.519-5.999.61-7.51-2.01l-1.507-2.61c-1.517-2.627-.616-5.987 2.02-7.507l1.525-.881c-.179-1.076-.272-2.18-.272-3.307 0-1.127.093-2.231.272-3.307l-1.525-.881c-2.631-1.519-3.528-4.89-2.02-7.507l1.507-2.61c1.517-2.627 4.877-3.527 7.51-2.01l1.528.882c1.696-1.401 3.627-2.527 5.725-3.311"/><path fill="#6b4fbb" d="m25 30c2.209 0 4-1.791 4-4 0-2.209-1.791-4-4-4-2.209 0-4 1.791-4 4 0 2.209 1.791 4 4 4m0 4c-4.418 0-8-3.582-8-8 0-4.418 3.582-8 8-8 4.418 0 8 3.582 8 8 0 4.418-3.582 8-8 8"/></g></g></g><g transform="translate(140 161)"><path fill="#e5e5e5" fill-rule="nonzero" d="m4 8.541v30.01c0 2.202 1.793 3.995 4 3.995h20c2.209 0 4-1.789 4-3.995v-30.01c0-2.202-1.793-3.995-4-3.995h-20c-2.209 0-4 1.789-4 3.995m-4 0c0-4.416 3.583-7.995 8-7.995h20c4.416 0 8 3.584 8 7.995v30.01c0 4.416-3.583 7.995-8 7.995h-20c-4.416 0-8-3.584-8-7.995v-30.01"/><g fill="#fb722e"><rect width="4" height="11" x="10" y="18.545" rx="2"/><rect width="4" height="11" x="21" y="18.545" rx="2"/></g></g><path fill="#e5e5e5" fill-rule="nonzero" d="m445.16 245.34c-16.874-11.778-110.62-20.336-222.14-20.336-111.61 0-205.4 8.571-222.18 20.364-.904.635-1.121 1.883-.486 2.786.635.904 1.883 1.121 2.786.486 15.756-11.07 109.46-19.636 219.88-19.636 110.34 0 203.99 8.55 219.85 19.617.906.632 2.153.41 2.785-.495.632-.906.41-2.153-.495-2.785"/></g></svg>
\ No newline at end of file

app/views/shared/empty_states/icons/_todos_all_done.svg

-<svg viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" fill="#FFF" stroke="#EEE" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>

app/views/shared/empty_states/icons/_todos_empty.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 337" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <rect id="a" width="180" height="220" x="66.2" y="74.4" rx="6"/>
-    <mask id="l" width="180" height="220" x="0" y="0" fill="#fff">
-      <use xlink:href="#a"/>
-    </mask>
-    <rect id="b" width="180" height="220" rx="6"/>
-    <mask id="m" width="180" height="220" x="0" y="0" fill="#fff">
-      <use xlink:href="#b"/>
-    </mask>
-    <rect id="c" width="28" height="28" rx="4"/>
-    <mask id="n" width="28" height="28" x="0" y="0" fill="#fff">
-      <use xlink:href="#c"/>
-    </mask>
-    <rect id="d" width="28" height="28" rx="4"/>
-    <mask id="o" width="28" height="28" x="0" y="0" fill="#fff">
-      <use xlink:href="#d"/>
-    </mask>
-    <circle id="e" cx="21.5" cy="21.5" r="21.5"/>
-    <mask id="p" width="43" height="43" x="0" y="0" fill="#fff">
-      <use xlink:href="#e"/>
-    </mask>
-    <circle id="f" cx="26.5" cy="26.5" r="26.5"/>
-    <mask id="q" width="53" height="53" x="0" y="0" fill="#fff">
-      <use xlink:href="#f"/>
-    </mask>
-    <circle id="g" cx="9.5" cy="4.5" r="4.5"/>
-    <mask id="r" width="13" height="13" x="-2" y="-2">
-      <path fill="#fff" d="M3-2h13v13H3z"/>
-      <use xlink:href="#g"/>
-    </mask>
-    <circle id="h" cx="26.5" cy="26.5" r="26.5"/>
-    <mask id="s" width="53" height="53" x="0" y="0" fill="#fff">
-      <use xlink:href="#h"/>
-    </mask>
-    <circle id="i" cx="21.5" cy="21.5" r="21.5"/>
-    <mask id="t" width="43" height="43" x="0" y="0" fill="#fff">
-      <use xlink:href="#i"/>
-    </mask>
-    <path id="j" d="M18 38h15c10.5 0 19-8.5 19-19S43.5 0 33 0H19C8.5 0 0 8.5 0 19c0 6.3 3 12 7.8 15.3l5.2 9c.6 1 1.4 1 2 0l3-5.3z"/>
-    <mask id="u" width="52" height="44" x="0" y="0" fill="#fff">
-      <use xlink:href="#j"/>
-    </mask>
-    <circle id="k" cx="18.5" cy="18.5" r="18.5"/>
-    <mask id="v" width="37" height="37" x="0" y="0" fill="#fff">
-      <use xlink:href="#k"/>
-    </mask>
-  </defs>
-  <g fill="none" fill-rule="evenodd" transform="translate(-6 -4)">
-    <use stroke="#EEE" stroke-width="6" mask="url(#l)" transform="rotate(-5 156.245 184.425)" xlink:href="#a"/>
-    <g transform="rotate(5 -707.333 618.042)">
-      <use fill="#FFF" stroke="#EEE" stroke-width="6" mask="url(#m)" xlink:href="#b"/>
-      <g transform="translate(29 24)">
-        <path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/>
-        <path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/>
-        <rect width="86" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/>
-        <rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/>
-      </g>
-      <g transform="translate(29 69)">
-        <path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/>
-        <path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/>
-        <rect width="86" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/>
-        <rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/>
-      </g>
-      <g transform="translate(28 160)">
-        <use stroke="#E5E5E5" stroke-width="6" mask="url(#n)" opacity=".7" xlink:href="#c"/>
-        <rect width="26" height="3" x="41" y="7" fill="#ECECEC" rx="1.5"/>
-        <rect width="43" height="3" x="41" y="17" fill="#ECECEC" rx="1.5"/>
-      </g>
-      <g transform="translate(28 116)">
-        <use stroke="#E5E5E5" stroke-width="6" mask="url(#o)" xlink:href="#d"/>
-        <rect width="86" height="3" x="41" y="7" fill="#E5E5E5" rx="1.5"/>
-        <rect width="43" height="3" x="41" y="17" fill="#E5E5E5" rx="1.5"/>
-      </g>
-    </g>
-    <g transform="rotate(-15 601.917 -782.362)">
-      <use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#p)" xlink:href="#e"/>
-      <text fill="#6B4FBB" font-family="SourceSansPro-Black, Source Sans Pro" font-size="20" font-weight="700" letter-spacing="-.1">
-        <tspan x="12" y="27">@</tspan>
-      </text>
-    </g>
-    <g transform="rotate(15 -686.59 1035.907)">
-      <use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#q)" xlink:href="#f"/>
-      <path fill="#FC6D26" d="M26.5 38.2c3.3 0 9.5-2.5 9.5-9.6 0-7-2.4-6.6-9.5-6.6-7 0-9.5-.4-9.5 6.6s6.2 9.6 9.5 9.6z"/>
-      <g transform="translate(17 14)">
-        <use fill="#FC6D26" xlink:href="#g"/>
-        <use stroke="#FFF" stroke-width="4" mask="url(#r)" xlink:href="#g"/>
-      </g>
-    </g>
-    <g transform="rotate(15 -85.125 65.185)">
-      <use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#s)" xlink:href="#h"/>
-      <path fill="#6B4FBB" d="M24 18.5c0-1.4 1-2.5 2.5-2.5 1.4 0 2.5 1 2.5 2.5v9c0 1.4-1 2.5-2.5 2.5-1.4 0-2.5-1-2.5-2.5v-9zM26.5 37c1.4 0 2.5-1 2.5-2.5 0-1.4-1-2.5-2.5-2.5-1.4 0-2.5 1-2.5 2.5 0 1.4 1 2.5 2.5 2.5z"/>
-    </g>
-    <g transform="rotate(-15 716.492 78.873)">
-      <use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#t)" xlink:href="#i"/>
-      <path fill="#FC6D26" d="M20 23v-3h3v3h-3zm0 3v1.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-2.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-3h-1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-2.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h3v-1.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v3h1.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v2.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-3z"/>
-    </g>
-    <g transform="rotate(-15 129.114 -585.74)">
-      <use stroke="#FDE5D8" stroke-width="6" mask="url(#u)" xlink:href="#j"/>
-      <circle cx="16" cy="20" r="2" fill="#FC6D26"/>
-      <circle cx="27" cy="20" r="2" fill="#FC6D26"/>
-      <circle cx="38" cy="20" r="2" fill="#FC6D26"/>
-    </g>
-    <g transform="rotate(-15 1254.8 -458.986)">
-      <use stroke="#FDE5D8" stroke-width="6" mask="url(#v)" xlink:href="#k"/>
-      <path fill="#FC6D26" d="M10.6 19l2-2c.5-.5.5-1 0-1.5-.3-.4-1-.4-1.3 0l-2.8 2.8c-.2.2-.3.4-.3.7 0 .3 0 .5.3.7l2.8 2.8c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-2-2zm14.8 0l-2-2c-.5-.5-.5-1 0-1.5.3-.4 1-.4 1.3 0l2.8 2.8c.2.2.3.4.3.7 0 .3 0 .5-.3.7l-2.8 2.8c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l2-2z"/>
-      <rect width="2" height="7" x="17" y="15.1" fill="#FC6D26" opacity=".5" transform="rotate(15 18.002 18.64)" rx="1"/>
-    </g>
-  </g>
-</svg>

app/views/shared/icons/_key_2.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.172 14.157l-.344.344-2.485.133a.462.462 0 0 1-.497-.503l.14-2.24a.599.599 0 0 1 .177-.382l5.155-5.155a4 4 0 1 1 2.828 2.828l-1.439 1.44-1.06-.354-.708.707.354 1.06-.707.708-1.06-.354-.708.707.354 1.06zm6.01-8.839a1 1 0 1 0 1.414-1.414 1 1 0 0 0-1.414 1.414z"/></svg>

config/dependency_decisions.yml

@@ -452,3 +452,15 @@
     :why: https://github.com/jaredhanson/utils-merge/blob/v1.0.0/LICENSE
     :versions: []
     :when: 2017-09-16 05:18:26.193764000 Z
+- - :approve
+  - svg4everybody
+  - :who: Tim Zallmann
+    :why: CC0 1.0 - https://github.com/jonathantneal/svg4everybody/blob/master/LICENSE.md
+    :versions: []
+    :when: 2017-09-13 17:31:16.425819400 Z
+- - :approve
+  - gitlab-svgs
+  - :who: Tim Zallmann
+    :why: Our own library - https://gitlab.com/gitlab-org/gitlab-svgs
+    :versions: []
+    :when: 2017-09-19 14:36:32.795496000 Z

config/svg.config.js

+/* eslint-disable no-commonjs */
+const path = require('path');
+const fs = require('fs');
+
+const sourcePath = path.join('node_modules', 'gitlab-svgs', 'dist');
+const sourcePathIllustrations = path.join('node_modules', 'gitlab-svgs', 'dist', 'illustrations');
+const destPath = path.normalize(path.join('app', 'assets', 'images'));
+
+// Actual Task copying the 2 files + all illustrations
+copyFileSync(path.join(sourcePath, 'icons.svg'), destPath);
+copyFileSync(path.join(sourcePath, 'icons.json'), destPath);
+copyFolderRecursiveSync(sourcePathIllustrations, destPath);
+
+// Helper Functions
+function copyFileSync(source, target) {
+  var targetFile = target;
+  //if target is a directory a new file with the same name will be created
+  if (fs.existsSync(target)) {
+    if (fs.lstatSync(target).isDirectory()) {
+      targetFile = path.join(target, path.basename(source));
+    }
+  }
+  console.log(`Copy SVG File : ${targetFile}`);
+  fs.writeFileSync(targetFile, fs.readFileSync(source));
+}
+
+function copyFolderRecursiveSync(source, target) {
+  var files = [];
+
+  //check if folder needs to be created or integrated
+  var targetFolder = path.join(target, path.basename(source));
+  if (!fs.existsSync(targetFolder)) {
+    fs.mkdirSync(targetFolder);
+  }
+
+  //copy
+  if (fs.lstatSync(source).isDirectory()) {
+    files = fs.readdirSync(source);
+    files.forEach(function (file) {
+      var curSource = path.join(source, file);
+      if (fs.lstatSync(curSource).isDirectory()) {
+        copyFolderRecursiveSync(curSource, targetFolder);
+      } else {
+        copyFileSync(curSource, targetFolder);
+      }
+    });
+  }
+}

config/webpack.config.js

@@ -45,6 +45,7 @@ var config = {
     group:                './group.js',
     groups:               './groups/index.js',
     groups_list:          './groups_list.js',
+    help:                 './help/help.js',
     how_to_merge:         './how_to_merge.js',
     issue_show:           './issue_show/index.js',
     integrations:         './integrations',

doc/development/fe_guide/icons.md

+# Icons
+
+We are using SVG Icons in GitLab with a SVG Sprite, due to this the icons are only loaded once and then referenced through an ID. The sprite SVG is located under `/assets/icons.svg`. Our goal is to replace one by one all inline SVG Icons (as those currently bloat the HTML) and also all Font Awesome usages.
+
+### Usage in HAML/Rails
+
+To use a sprite Icon in HAML or Rails we use a specific helper function : 
+
+`sprite_icon(icon_name, size: nil, css_class: '')`
+
+**icon_name** Use the icon_name that you can find in the SVG Sprite (Overview is available under `/assets/sprite.symbol.html`).
+**size (optional)** Use one of the following sizes : 16,24,32,48,72 (this will be translated into a `s16` class)
+**css_class (optional)** If you want to add additional css classes
+
+**Example** 
+
+`= sprite_icon('issues', size: 72, css_class: 'icon-danger')`
+
+**Output from example above**
+
+`<svg class="s72 icon-danger"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons.svg#issues"></use></svg>`
+
+### Usage in HTML/JS
+
+Please use the following function inside JS to render an icon : 
+`gl.utils.spriteIcon(iconName)`
+
+## Adding a new icon to the sprite
+
+All Icons and Illustrations are managed in the [gitlab-svgs](https://gitlab.com/gitlab-org/gitlab-svgs) repository which is added as a dev-dependency.
+
+To upgrade to a new SVG Sprite version run `yarn upgrade https://gitlab.com/gitlab-org/gitlab-svgs` and then run `yarn run svg`. This task will copy the svg sprite and all illustrations in the correct folders.
+
+# SVG Illustrations
+
+Please use from now on for any SVG based illustrations simple `img` tags to show an illustration by simply using either `image_tag` or `image_path` helpers. Please use the class `svg-content` around it to ensure nice rendering. The illustrations are also organised in the [gitlab-svgs](https://gitlab.com/gitlab-org/gitlab-svgs) repository (as they are then automatically optimised).
+
+**Example**
+
+`= image_tag 'illustrations/merge_requests.svg'`

doc/development/fe_guide/index.md

@@ -98,6 +98,11 @@ Vue specific design patterns and practices.
 
 ---
 
+## [Icons](icons.md)
+How we use SVG for our Icons.
+
+---
+
 ## Style Guides
 
 ### [JavaScript Style Guide](style_guide_js.md)

lib/gitlab/gon_helper.rb

@@ -20,6 +20,7 @@ module Gitlab
       gon.gitlab_url             = Gitlab.config.gitlab.url
       gon.revision               = Gitlab::REVISION
       gon.gitlab_logo            = ActionController::Base.helpers.asset_path('gitlab_logo.png')
+      gon.sprite_icons           = ActionController::Base.helpers.asset_path('icons.svg')
 
       if current_user
         gon.current_user_id = current_user.id

package.json

@@ -8,6 +8,7 @@
     "karma": "karma start config/karma.config.js --single-run",
     "karma-coverage": "BABEL_ENV=coverage karma start config/karma.config.js --single-run",
     "karma-start": "karma start config/karma.config.js",
+    "svg": "node config/svg.config.js",
     "webpack": "webpack --config config/webpack.config.js",
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
@@ -28,7 +29,7 @@
     "css-loader": "^0.28.0",
     "d3": "^3.5.11",
     "deckar01-task_list": "^2.0.0",
-    "document-register-element": "^1.3.0",
+    "document-register-element": "1.3.0",
     "dropzone": "^4.2.0",
     "emoji-unicode-version": "^0.2.1",
     "eslint-plugin-html": "^2.0.1",
@@ -53,6 +54,7 @@
     "react-dev-utils": "^0.5.2",
     "select2": "3.5.2-browserify",
     "sql.js": "^0.4.0",
+    "svg4everybody": "2.1.9",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",
     "three-stl-loader": "^1.0.4",
@@ -78,6 +80,7 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jasmine": "^2.1.0",
     "eslint-plugin-promise": "^3.5.0",
+    "gitlab-svgs": "https://gitlab.com/gitlab-org/gitlab-svgs.git",
     "istanbul": "^0.4.5",
     "jasmine-core": "^2.6.3",
     "jasmine-jquery": "^2.1.1",

spec/helpers/icons_helper_spec.rb

@@ -16,6 +16,25 @@ describe IconsHelper do
     end
   end
 
+  describe 'sprite_icon' do
+    icon_name = 'clock'
+
+    it 'returns svg icon html' do
+      expect(sprite_icon(icon_name).to_s)
+        .to eq "<svg><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
+    end
+
+    it 'returns svg icon html + size classes' do
+      expect(sprite_icon(icon_name, size: 72).to_s)
+        .to eq "<svg class=\"s72\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
+    end
+
+    it 'returns svg icon html + size classes + additional class' do
+      expect(sprite_icon(icon_name, size: 72, css_class: 'icon-danger').to_s)
+        .to eq "<svg class=\"s72 icon-danger\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
+    end
+  end
+
   describe 'file_type_icon_class' do
     it 'returns folder class' do
       expect(file_type_icon_class('folder', 0, 'folder_name')).to eq 'folder'

spec/javascripts/commit/pipelines/pipelines_spec.js

@@ -29,6 +29,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            emptyStateSvgPath: 'foo',
+            errorStateSvgPath: 'foo',
             autoDevopsHelpPath: 'foo',
           },
         }).$mount();
@@ -65,6 +67,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            emptyStateSvgPath: 'foo',
+            errorStateSvgPath: 'foo',
             autoDevopsHelpPath: 'foo',
           },
         }).$mount();
@@ -117,6 +121,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            emptyStateSvgPath: 'foo',
+            errorStateSvgPath: 'foo',
             autoDevopsHelpPath: 'foo',
           },
         }).$mount();
@@ -139,6 +145,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
         propsData: {
           endpoint: 'endpoint',
           helpPagePath: 'foo',
+          emptyStateSvgPath: 'foo',
+          errorStateSvgPath: 'foo',
           autoDevopsHelpPath: 'foo',
         },
       }).$mount();

spec/javascripts/fixtures/pipelines.html.haml

@@ -2,6 +2,8 @@
   #pipelines-list-vue{ data: { endpoint: 'foo',
     "css-class" => 'foo',
     "help-page-path" => 'foo',
+    "empty-state-svg-path" => 'foo',
+    "error-state-svg-path" => 'foo',
     "new-pipeline-path" => 'foo',
     "can-create-pipeline" => 'true',
     "all-path" =>  'foo',

spec/javascripts/lib/utils/common_utils_spec.js

@@ -411,5 +411,15 @@ describe('common_utils', () => {
       commonUtils.ajaxPost(requestURL, data);
       expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST');
     });
+
+    describe('gl.utils.spriteIcon', () => {
+      beforeEach(() => {
+        window.gon.sprite_icons = 'icons.svg';
+      });
+
+      it('should return the svg for a linked icon', () => {
+        expect(gl.utils.spriteIcon('test')).toEqual('<svg><use xlink:href="icons.svg#test" /></svg>');
+      });
+    });
   });
 });

spec/javascripts/monitoring/dashboard_state_spec.js

@@ -21,6 +21,9 @@ describe('EmptyState', () => {
         selectedState: 'gettingStarted',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.currentState).toBe(component.states.gettingStarted);
@@ -31,6 +34,9 @@ describe('EmptyState', () => {
         selectedState: 'gettingStarted',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.buttonPath).toEqual(statePaths.settingsPath);
@@ -42,6 +48,9 @@ describe('EmptyState', () => {
         selectedState: 'loading',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.buttonPath).toEqual(statePaths.documentationPath);
@@ -53,6 +62,9 @@ describe('EmptyState', () => {
         selectedState: 'unableToConnect',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.showButtonDescription).toEqual(true);
@@ -63,6 +75,9 @@ describe('EmptyState', () => {
         selectedState: 'loading',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.showButtonDescription).toEqual(false);
@@ -74,6 +89,9 @@ describe('EmptyState', () => {
       selectedState: 'gettingStarted',
       settingsPath: statePaths.settingsPath,
       documentationPath: statePaths.documentationPath,
+      emptyGettingStartedSvgPath: 'foo',
+      emptyLoadingSvgPath: 'foo',
+      emptyUnableToConnectSvgPath: 'foo',
     });
 
     expect(component.$el.querySelector('svg')).toBeDefined();
@@ -87,6 +105,9 @@ describe('EmptyState', () => {
       selectedState: 'loading',
       settingsPath: statePaths.settingsPath,
       documentationPath: statePaths.documentationPath,
+      emptyGettingStartedSvgPath: 'foo',
+      emptyLoadingSvgPath: 'foo',
+      emptyUnableToConnectSvgPath: 'foo',
     });
 
     expect(component.$el.querySelector('svg')).toBeDefined();
@@ -100,6 +121,9 @@ describe('EmptyState', () => {
       selectedState: 'unableToConnect',
       settingsPath: statePaths.settingsPath,
       documentationPath: statePaths.documentationPath,
+      emptyGettingStartedSvgPath: 'foo',
+      emptyLoadingSvgPath: 'foo',
+      emptyUnableToConnectSvgPath: 'foo',
     });
 
     expect(component.$el.querySelector('svg')).toBeDefined();

spec/javascripts/pipelines/empty_state_spec.js

@@ -11,6 +11,7 @@ describe('Pipelines Empty State', () => {
     component = new EmptyStateComponent({
       propsData: {
         helpPagePath: 'foo',
+        emptyStateSvgPath: 'foo',
       },
     }).$mount();
   });

spec/javascripts/pipelines/error_state_spec.js

@@ -8,7 +8,11 @@ describe('Pipelines Error State', () => {
   beforeEach(() => {
     ErrorStateComponent = Vue.extend(errorStateComp);
 
-    component = new ErrorStateComponent().$mount();
+    component = new ErrorStateComponent({
+      propsData: {
+        errorStateSvgPath: 'foo',
+      },
+    }).$mount();
   });
 
   it('should render error state SVG', () => {

symbol/icons.svg

+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 1792 1792" id="clock_o" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9H672q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224V544q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5T1281.5 1561 896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"/></symbol><symbol viewBox="0 0 36 18" id="commit" xmlns="http://www.w3.org/2000/svg"><path d="M34 7h-7.2c-.9-4-4.5-7-8.8-7s-7.9 3-8.8 7H2C.9 7 0 7.9 0 9s.9 2 2 2h7.2c.9 4 4.5 7 8.8 7s7.9-3 8.8-7H34c1.1 0 2-.9 2-2s-.9-2-2-2m-16 7c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5"/></symbol><symbol viewBox="0 0 16 16" id="project" xmlns="http://www.w3.org/2000/svg"><path d="M8.462 2.177l-.038.044a.505.505 0 0 0 .038-.044zm-.787 0a.5.5 0 0 0 .038.043l-.038-.043zM3.706 7h8.725L8.069 2.585 3.706 7zM7 13.369V12a1 1 0 0 1 2 0v1.369h3V9H4v4.369h3zM14 9v4.836c0 .833-.657 1.533-1.5 1.533h-9c-.843 0-1.5-.7-1.5-1.533V9h-.448a1.1 1.1 0 0 1-.783-1.873L6.934.887a1.5 1.5 0 0 1 2.269 0l6.165 6.24A1.1 1.1 0 0 1 14.585 9H14z"/></symbol></svg>
\ No newline at end of file

symbol/sprite.symbol.html

+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta charset="utf-8"/>
+		<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+		<script src="https://rawgit.com/jonathantneal/svg4everybody/master/dist/svg4everybody.js"></script>
+		<script>svg4everybody();</script>
+		<title>SVG &lt;symbol&gt; sprite preview | svg-sprite</title>
+		<style>@charset "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial,Helvetica,sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 1em;cursor:default}.icon-box{margin:0;width:144px;height:144px;position:relative;background:#ccc url("data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=") top left repeat;border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style>
+		
+<!--
+	
+Sprite shape dimensions
+====================================================================================================
+You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
+they would become a huge 100% in size. You may use the following dimension classes for doing so.
+They might well be outsourced to an external stylesheet of course.
+
+-->
+
+<style type="text/css">
+	.svg-clock_o-dims { width: 200px; height: 200px; }
+	.svg-commit-dims { width: 36px; height: 18px; }
+	.svg-project-dims { width: 16px; height: 16px; }
+</style>
+<!--
+====================================================================================================
+-->
+
+	</head>
+	<body>
+	
+<!--
+	
+Inline <symbol> SVG sprite
+====================================================================================================
+This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
+below within this document. Please see
+
+	https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#defs--symbol-mode
+
+for further details on how to create this embeddable sprite variant.
+
+-->
+
+<svg width="0" height="0" style="position:absolute">
+		<symbol viewBox="0 0 1792 1792" id="clock_o" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9H672q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224V544q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5T1281.5 1561 896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"/></symbol>
+		<symbol viewBox="0 0 36 18" id="commit" xmlns="http://www.w3.org/2000/svg"><path d="M34 7h-7.2c-.9-4-4.5-7-8.8-7s-7.9 3-8.8 7H2C.9 7 0 7.9 0 9s.9 2 2 2h7.2c.9 4 4.5 7 8.8 7s7.9-3 8.8-7H34c1.1 0 2-.9 2-2s-.9-2-2-2m-16 7c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5"/></symbol>
+		<symbol viewBox="0 0 16 16" id="project" xmlns="http://www.w3.org/2000/svg"><path d="M8.462 2.177l-.038.044a.505.505 0 0 0 .038-.044zm-.787 0a.5.5 0 0 0 .038.043l-.038-.043zM3.706 7h8.725L8.069 2.585 3.706 7zM7 13.369V12a1 1 0 0 1 2 0v1.369h3V9H4v4.369h3zM14 9v4.836c0 .833-.657 1.533-1.5 1.533h-9c-.843 0-1.5-.7-1.5-1.533V9h-.448a1.1 1.1 0 0 1-.783-1.873L6.934.887a1.5 1.5 0 0 1 2.269 0l6.165 6.24A1.1 1.1 0 0 1 14.585 9H14z"/></symbol>
+</svg>
+
+<!--
+====================================================================================================
+-->
+		
+		<header>
+			<h1>SVG <code>&lt;symbol&gt;</code> sprite preview</h1>
+			<p>This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:</p>
+			<ul>
+				<li>Your browser has to <a href="http://caniuse.com/#feat=svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li>
+				<li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#defs--symbol-mode" target="_blank">see the documentation</a> for details on how to create such an embeddable sprite.</li>
+				<li>Internet Explorer up to version 11 doesn't support external sprites for use with inline SVG. For IE 9-11, you may polyfill this functionality with <a href="https://github.com/jonathantneal/svg4everybody" target="_blank">SVG for Everybody</a>.</li>
+			</ul>
+		</header>
+		<section>
+
+<!--
+	
+A) Inline SVG with embedded sprite
+====================================================================================================
+These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
+embedded above. They may be styled via CSS.
+
+-->
+
+			<h3>A) Inline SVG with embedded sprite</h3>
+			<ul>
+
+				<li title="clock_o">
+					<div class="icon-box">
+						
+						<!-- clock_o -->
+						<svg class="svg-clock_o-dims">
+							<use xlink:href="#clock_o"></use>
+						</svg>
+						
+					</div>
+					<h2>clock_o</h2>
+				</li>
+				<li title="commit">
+					<div class="icon-box">
+						
+						<!-- commit -->
+						<svg class="svg-commit-dims">
+							<use xlink:href="#commit"></use>
+						</svg>
+						
+					</div>
+					<h2>commit</h2>
+				</li>
+				<li title="project">
+					<div class="icon-box">
+						
+						<!-- project -->
+						<svg class="svg-project-dims">
+							<use xlink:href="#project"></use>
+						</svg>
+						
+					</div>
+					<h2>project</h2>
+				</li>
+			</ul>
+
+<!--
+====================================================================================================
+-->
+
+		</section>
+		<section>
+
+<!--
+	
+B) Inline SVG with external sprite (IE 9-11 with polyfill only)
+====================================================================================================
+These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
+SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only)
+
+-->
+
+			<h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3>
+			<ul>
+				
+				<li title="clock_o">
+					<div class="icon-box">
+						
+						<!-- clock_o -->
+						<svg class="svg-clock_o-dims">
+							<use xlink:href="icons.svg#clock_o"></use>
+						</svg>
+						
+					</div>
+					<h2>clock_o</h2>
+				</li>
+				<li title="commit">
+					<div class="icon-box">
+						
+						<!-- commit -->
+						<svg class="svg-commit-dims">
+							<use xlink:href="icons.svg#commit"></use>
+						</svg>
+						
+					</div>
+					<h2>commit</h2>
+				</li>
+				<li title="project">
+					<div class="icon-box">
+						
+						<!-- project -->
+						<svg class="svg-project-dims">
+							<use xlink:href="icons.svg#project"></use>
+						</svg>
+						
+					</div>
+					<h2>project</h2>
+				</li>
+			</ul>
+
+<!--
+====================================================================================================
+-->
+
+		</section>
+		<footer>
+			<p>Generated at Fri, 25 Aug 2017 12:38:01 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
+		</footer>
+	</body>
+</html>

yarn.lock

@@ -1834,7 +1834,7 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-document-register-element@^1.3.0:
+document-register-element@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/document-register-element/-/document-register-element-1.3.0.tgz#fb3babb523c74662be47be19c6bc33e71990d940"
 
@@ -2712,6 +2712,10 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+"gitlab-svgs@https://gitlab.com/gitlab-org/gitlab-svgs.git":
+  version "1.0.2"
+  resolved "https://gitlab.com/gitlab-org/gitlab-svgs.git#7f36f3951dd08904761780da48efcd639f34c3af"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -5937,6 +5941,10 @@ supports-color@^4.2.1:
   dependencies:
     has-flag "^2.0.0"
 
+svg4everybody@2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"