Пользовательские элементы

<?xml version="1.0" encoding="UTF-8"?> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>web-components/custom-elements</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="web-components/custom-elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill-rule="nonzero"> <rect id="mask" stroke="#021F48" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g id="blocks" transform="translate(10.000000, 10.000000)"> <path d="M49,8.33477023 L49,4.27449031 C49,3.85167696 48.6571884,3.50886531 48.234375,3.50886531 L43.8144607,3.50886531 L43.8144607,9.10039523 L48.234375,9.10039523 C48.6571884,9.10039523 49,8.75758357 49,8.33477023 Z" id="Shape" fill="#F288E8"> </path> <path d="M49,17.1618881 L49,13.1019821 C49,12.6791687 48.6571884,12.3363571 48.234375,12.3363571 L43.8144607,12.3363571 L43.8144607,17.9275131 L48.234375,17.9275131 C48.6571884,17.9275131 49,17.5847016 49,17.1618881 Z" id="Shape" fill="#F288E8"> </path> <path d="M49,25.9893799 L49,21.9294739 C49,21.5066604 48.6571884,21.1638489 48.234375,21.1638489 L43.8144607,21.1638489 L43.8144607,26.7550049 L48.234375,26.7550049 C48.6571884,26.7550049 49,26.4121933 49,25.9893799 Z" id="Shape" fill="#F288E8"> </path> <path d="M48.2104492,3.50886531 L47.0440674,3.50886531 L47.0440674,6.81922147 C47.0440674,7.25511935 46.6904145,7.60877225 46.2545166,7.60877225 L43.8144607,7.60877225 L43.8144607,9.10002141 L48.2104492,9.10002141 C48.6463471,9.10002141 49,8.74674222 49,8.31047063 L49,4.29841609 C49,3.86214449 48.6463471,3.50886531 48.2104492,3.50886531 Z" id="Shape" fill="#D866D3"> </path> <path d="M48.2104492,12.3363571 L47.0440674,12.3363571 L47.0440674,15.6467133 C47.0440674,16.0826111 46.6904145,16.4362641 46.2545166,16.4362641 L43.8144607,16.4362641 L43.8144607,17.9275131 L48.2104492,17.9275131 C48.6463471,17.9275131 49,17.574234 49,17.1379624 L49,13.1259079 C49,12.6896362 48.6463471,12.3363571 48.2104492,12.3363571 Z" id="Shape" fill="#D866D3"> </path> <path d="M48.2104492,21.1638489 L47.0440674,21.1638489 L47.0440674,24.474205 C47.0440674,24.9101028 46.6904145,25.2637558 46.2545166,25.2637558 L43.8144607,25.2637558 L43.8144607,26.7550049 L48.2104492,26.7550049 C48.6463471,26.7550049 49,26.401352 49,25.9654541 L49,21.9533997 C49,21.517128 48.6463471,21.1638489 48.2104492,21.1638489 Z" id="Shape" fill="#D866D3"> </path> <path d="M34.4206009,29.2122574 L34.4206009,0.765625 C34.4206009,0.342811561 34.7634125,0 35.1862259,0 L44.1845627,0 C44.6073761,0 44.9501877,0.342811561 44.9501877,0.765625 L44.9501877,29.2122574 C44.9501877,29.6350708 44.6073761,29.9778824 44.1845627,29.9778824 L35.1862259,29.9778824 C34.7634125,29.9778824 34.4206009,29.6350708 34.4206009,29.2122574 Z" id="Shape" fill="#F288E8"> </path> <path d="M15.5154953,0 L11.4552154,0 C11.0324021,0 10.6895904,0.342811561 10.6895904,0.765625 L10.6895904,5.18553927 L16.2811203,5.18553927 L16.2811203,0.765625 C16.2811203,0.342811561 15.9383087,0 15.5154953,0 Z" id="Shape" fill="#F96058"> </path> <path d="M24.3429871,0 L20.2827072,0 C19.8598938,0 19.5170822,0.342811561 19.5170822,0.765625 L19.5170822,5.18553927 L25.1086121,5.18553927 L25.1086121,0.765625 C25.1086121,0.342811561 24.7658005,0 24.3429871,0 Z" id="Shape" fill="#F96058"> </path> <path d="M15.4915695,0 L13.3203049,0 C13.7562027,0 14.1098557,0.353652906 14.1098557,0.789550781 L14.1098557,5.18553927 L16.2811203,5.18553927 L16.2811203,0.789550781 C16.2811203,0.35327909 15.9278412,0 15.4915695,0 Z" id="Shape" fill="#E94141"> </path> <path d="M24.3190613,0 L22.1477966,0 C22.5836944,0 22.9373474,0.353652906 22.9373474,0.789550781 L22.9373474,5.18553927 L25.1086121,5.18553927 L25.1086121,0.789550781 C25.1086121,0.35327909 24.7549591,0 24.3190613,0 Z" id="Shape" fill="#E94141"> </path> <path d="M27.8791428,14.5790253 L7.94672391,14.5790253 C7.52391057,14.5790253 7.18109891,14.2362137 7.18109891,13.8134003 L7.18109891,4.81543729 C7.18109891,4.39262395 7.52391057,4.04981229 7.94672391,4.04981229 L27.8791428,4.04981229 C28.3019561,4.04981229 28.6447678,4.39262395 28.6447678,4.81543729 L28.6447678,13.8137741 C28.6447678,14.2365875 28.3019561,14.5790253 27.8791428,14.5790253 Z" id="Shape" fill="#F96058"> </path> <path d="M44.1606369,0 L42.2338638,0 L42.2338638,27.543808 C42.2338638,27.9797058 41.8802109,28.3333588 41.444313,28.3333588 L34.4209747,28.3333588 L34.4209747,29.1883316 C34.4209747,29.6246033 34.7742539,29.9778824 35.2105255,29.9778824 L44.1606369,29.9778824 C44.5965347,29.9778824 44.9501877,29.6246033 44.9501877,29.1883316 L44.9501877,0.789550781 C44.9501877,0.35327909 44.5965347,0 44.1606369,0 Z" id="Shape" fill="#D866D3"> </path> <path d="M27.855217,4.04981229 L25.9288178,4.04981229 L25.9288178,12.1445771 C25.9288178,12.5808487 25.5751648,12.9341279 25.139267,12.9341279 L7.18109891,12.9341279 L7.18109891,13.7894745 C7.18109891,14.2257461 7.534378,14.5790253 7.9706497,14.5790253 L27.855217,14.5790253 C28.2914887,14.5790253 28.6447678,14.2257461 28.6447678,13.7894745 L28.6447678,4.83936307 C28.6447678,4.40346529 28.2914887,4.04981229 27.855217,4.04981229 Z" id="Shape" fill="#E94141"> </path> <path d="M38.388916,36.0931626 L0.765625,36.0931626 C0.342811561,36.0931626 0,35.750351 0,35.3275376 L0,18.072937 C0,17.6501236 0.342811561,17.307312 0.765625,17.307312 L38.388916,17.307312 C38.8117295,17.307312 39.154541,17.6501236 39.154541,18.072937 L39.154541,35.3275376 C39.154541,35.750351 38.8117295,36.0931626 38.388916,36.0931626 Z" id="Shape" fill="#FFA511"> </path> <g id="Group" transform="translate(3.445313, 19.714844)" fill="#FFDC13"> <path d="M5.65508273,2.85501859 C5.65508273,4.39897921 4.40309138,5.65059664 2.85913086,5.65059664 C1.31517034,5.65059664 0.0635528086,4.39897921 0.0635528086,2.85501859 C0.0635528086,1.31105807 1.31517034,0.0594406367 2.85913086,0.0594406367 C4.40309138,0.0594406367 5.65508273,1.31105807 5.65508273,2.85501859 Z" id="Shape"> </path> <path d="M5.65508273,11.1157685 C5.65508273,12.6601028 4.40309138,13.9117203 2.85913086,13.9117203 C1.31517034,13.9117203 0.0635528086,12.6601028 0.0635528086,11.1157685 C0.0635528086,9.57180786 1.31517034,8.32019043 2.85913086,8.32019043 C4.40309138,8.32019043 5.65508273,9.57180786 5.65508273,11.1157685 Z" id="Shape"> </path> <path d="M14.4676208,2.85501859 C14.4676208,4.39897921 13.2160034,5.65059664 11.6720429,5.65059664 C10.1277085,5.65059664 8.87609103,4.39897921 8.87609103,2.85501859 C8.87609103,1.31105807 10.1277085,0.0594406367 11.6720429,0.0594406367 C13.2160034,0.0594406367 14.4676208,1.31105807 14.4676208,2.85501859 Z" id="Shape"> </path> <path d="M14.4676208,11.1157685 C14.4676208,12.6601028 13.2160034,13.9117203 11.6720429,13.9117203 C10.1277085,13.9117203 8.87609103,12.6601028 8.87609103,11.1157685 C8.87609103,9.57180786 10.1277085,8.32019043 11.6720429,8.32019043 C13.2160034,8.32019043 14.4676208,9.57180786 14.4676208,11.1157685 Z" id="Shape"> </path> <path d="M23.3096924,2.85501859 C23.3096924,4.39897921 22.058075,5.65059664 20.5141143,5.65059664 C18.9701538,5.65059664 17.7185364,4.39897921 17.7185364,2.85501859 C17.7185364,1.31105807 18.9701538,0.0594406367 20.5141143,0.0594406367 C22.058075,0.0594406367 23.3096924,1.31105807 23.3096924,2.85501859 Z" id="Shape"> </path> <path d="M23.3096924,11.1157685 C23.3096924,12.6601028 22.058075,13.9117203 20.5141143,13.9117203 C18.9701538,13.9117203 17.7185364,12.6601028 17.7185364,11.1157685 C17.7185364,9.57180786 18.9701538,8.32019043 20.5141143,8.32019043 C22.058075,8.32019043 23.3096924,9.57180786 23.3096924,11.1157685 Z" id="Shape"> </path> <path d="M32.1226044,2.85501859 C32.1226044,4.39897921 30.8709869,5.65059664 29.3270264,5.65059664 C27.7826919,5.65059664 26.5310745,4.39897921 26.5310745,2.85501859 C26.5310745,1.31105807 27.7826919,0.0594406367 29.3270264,0.0594406367 C30.8709869,0.0594406367 32.1226044,1.31105807 32.1226044,2.85501859 Z" id="Shape"> </path> <path d="M32.1226044,11.1157685 C32.1226044,12.6601028 30.8709869,13.9117203 29.3270264,13.9117203 C27.7826919,13.9117203 26.5310745,12.6601028 26.5310745,11.1157685 C26.5310745,9.57180786 27.7826919,8.32019043 29.3270264,8.32019043 C30.8709869,8.32019043 32.1226044,9.57180786 32.1226044,11.1157685 Z" id="Shape"> </path> </g> <path d="M38.3649902,17.307312 L36.4064407,17.307312 L36.4064407,33.2523499 C36.4064407,33.6886215 36.0527878,34.0419006 35.6168899,34.0419006 L5.68434189e-14,34.0419006 L5.68434189e-14,35.3036118 C5.68434189e-14,35.7395096 0.353652906,36.0931626 0.789550781,36.0931626 L38.3649902,36.0931626 C38.8008881,36.0931626 39.154541,35.7395096 39.154541,35.3036118 L39.154541,18.0968628 C39.154541,17.6609649 38.8008881,17.307312 38.3649902,17.307312 Z" id="Shape" fill="#F48500"> </path> <path d="M45.7726364,48.714386 L25.825264,48.714386 C25.4024506,48.714386 25.059639,48.3715744 25.059639,47.948761 L25.059639,30.6937866 C25.059639,30.2709732 25.4024506,29.9281616 25.825264,29.9281616 L45.7726364,29.9281616 C46.1954498,29.9281616 46.5382614,30.2709732 46.5382614,30.6937866 L46.5382614,47.948761 C46.5382614,48.3715744 46.1954498,48.714386 45.7726364,48.714386 Z" id="Shape" fill="#0064DB"> </path> <path d="M45.7487107,29.9281616 L43.7901611,29.9281616 L43.7901611,45.8731995 C43.7901611,46.3094712 43.436882,46.6627502 43.0006104,46.6627502 L25.059639,46.6627502 L25.059639,47.9248352 C25.059639,48.360733 25.412918,48.714386 25.8491897,48.714386 L45.7487107,48.714386 C46.1846084,48.714386 46.5382614,48.360733 46.5382614,47.9248352 L46.5382614,30.7177124 C46.5382614,30.2818145 46.1846084,29.9281616 45.7487107,29.9281616 Z" id="Shape" fill="#0050C4"> </path> <path d="M34.1880722,35.190712 C34.1880722,36.7346726 32.9364548,37.9866638 31.3924942,37.9866638 C29.8485337,37.9866638 28.5969162,36.7346726 28.5969162,35.190712 C28.5969162,33.6467514 29.8485337,32.395134 31.3924942,32.395134 C32.9364548,32.395134 34.1880722,33.6467514 34.1880722,35.190712 Z" id="Shape" fill="#0B9CFF"> </path> <path d="M34.1880722,43.4518357 C34.1880722,44.9957962 32.9364548,46.2474136 31.3924942,46.2474136 C29.8485337,46.2474136 28.5969162,44.9957962 28.5969162,43.4518357 C28.5969162,41.907875 29.8485337,40.6562576 31.3924942,40.6562576 C32.9364548,40.6562576 34.1880722,41.907875 34.1880722,43.4518357 Z" id="Shape" fill="#0B9CFF"> </path> <path d="M43.0009842,35.190712 C43.0009842,36.7346726 41.7493667,37.9866638 40.2050323,37.9866638 C38.6610718,37.9866638 37.4094543,36.7346726 37.4094543,35.190712 C37.4094543,33.6467514 38.6610718,32.395134 40.2050323,32.395134 C41.7493667,32.395134 43.0009842,33.6467514 43.0009842,35.190712 Z" id="Shape" fill="#0B9CFF"> </path> <path d="M43.0009842,43.4518357 C43.0009842,44.9957962 41.7493667,46.2474136 40.2050323,46.2474136 C38.6610718,46.2474136 37.4094543,44.9957962 37.4094543,43.4518357 C37.4094543,41.907875 38.6610718,40.6562576 40.2050323,40.6562576 C41.7493667,40.6562576 43.0009842,41.907875 43.0009842,43.4518357 Z" id="Shape" fill="#0B9CFF"> </path> </g> </g> </g> </svg>