Created
April 29, 2022 13:51
-
-
Save darcher-/993718b0d157d6b203b1f6f14ea0f073 to your computer and use it in GitHub Desktop.
SVG Reference with symbol ID
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* reset */ | |
| *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) { | |
| all: unset; | |
| display: revert; | |
| } | |
| :where([hidden]) { | |
| display: none; | |
| } | |
| :where([contenteditable]) { | |
| -moz-user-modify: read-write; | |
| -webkit-user-modify: read-write; | |
| overflow-wrap: break-word; | |
| -webkit-line-break: after-white-space; | |
| } | |
| :where([draggable="true"]) { | |
| -webkit-user-drag: element; | |
| } | |
| ::placeholder { | |
| color: unset; | |
| } | |
| *, | |
| ::before, | |
| ::after { | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| font: 400 62.5%/1 system-ui, sans-serif; | |
| display: flex; | |
| height: 100%; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| a, | |
| button { | |
| cursor: revert; | |
| } | |
| ol, | |
| ul, | |
| menu { | |
| list-style: none; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| } | |
| textarea { | |
| white-space: revert; | |
| } | |
| meter { | |
| -webkit-appearance: revert; | |
| appearance: revert; | |
| } | |
| svg { | |
| height: auto; | |
| aspect-ratio: 1 / 1; | |
| } | |
| /* layout */ | |
| .icons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| .icons li { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex: 0 1 8.75rem; | |
| aspect-ratio: 1 / 1; | |
| } | |
| .icons .icon { | |
| width: 2.4rem; | |
| color: rgb(0 64 128 / 50%); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- calling icons with id references --> | |
| <ul class="icons"> | |
| <li> | |
| <svg aria-label="caret down icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-caret-down" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="caret up icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-caret-up" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="caret left icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-caret-left" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="caret right icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-caret-right"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="arrow left icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-arrow-left" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="arrow right icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-arrow-right" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="plus icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-plus" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="minus icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-minus" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="checkmark icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-checkmark" /> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="close icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-close"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="back icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-back"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="clear icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-clear"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="cancel icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-cancel"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="info icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-info"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="cost icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-cost"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="find icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-find"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="bell icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-bell"> | |
| </use> | |
| </svg> | |
| </li> | |
| <li> | |
| <svg aria-label="warn icon" class="icon" focusable="false" role="img"> | |
| <use xlink:href="#icon-warn"> | |
| </use> | |
| </svg> | |
| </li> | |
| </ul> | |
| <!-- below lives in highest level template --> | |
| <svg aria-hidden="true" hidden xmlns="http://www.w3.org/2000/svg"> | |
| <symbol fill="none" id="icon-arrow-right" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M13 7l5 5m0 0l-5 5m5-5H6" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol id="icon-arrow-left"> | |
| <svg> | |
| <use transform="rotate(180)" transform-origin="center" xlink:href="#icon-arrow-right" /> | |
| </svg> | |
| </symbol> | |
| <symbol fill="none" id="icon-caret-right" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol id="icon-caret-up"> | |
| <svg> | |
| <use transform="rotate(-90)" transform-origin="center" xlink:href="#icon-caret-right" /> | |
| </svg> | |
| </symbol> | |
| <symbol id="icon-caret-down"> | |
| <svg> | |
| <use transform="rotate(90)" transform-origin="center" xlink:href="#icon-caret-right" /> | |
| </svg> | |
| </symbol> | |
| <symbol id="icon-caret-left"> | |
| <svg> | |
| <use transform="rotate(180)" transform-origin="center" xlink:href="#icon-caret-right" /> | |
| </svg> | |
| </symbol> | |
| <symbol fill="none" id="icon-plus" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M12 6v6m0 0v6m0-6h6m-6 0H6" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-minus" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M18 12H6" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="currentColor" id="icon-checkmark" viewbox="0 0 20 20"> | |
| <path clip-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill-rule="evenodd" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-close" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-cancel" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-clear" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-bell" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-info" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-cost" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-back" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-find" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| <symbol fill="none" id="icon-warn" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"> | |
| <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-linecap="round" stroke-linejoin="round" /> | |
| </symbol> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment