mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: index svelte components (#1266)

Browse source 
Add `carbon.yml` that indexes the Svelte component library.

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
This commit is contained in:
Andrea N. Cardona 2022-05-04 13:12:40 -05:00 • committed by GitHub
commit b531bd19b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1448 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

149
thumbnails/breakpoint.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

15
thumbnails/button-set.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>button-set</title>
<g id="button-set" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-2" fill="#393939" x="56" y="74" width="104" height="32"></rect>
<rect id="Rectangle-Copy-4" fill="#FFFFFF" x="159" y="74" width="1" height="32"></rect>
<rect id="Rectangle-Copy-3" fill="#0E62FE" x="160" y="74" width="104" height="32"></rect>
<text id="Cancel" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#F4F4F4">
<tspan x="68" y="95">Cancel</tspan>
</text>
<text id="Submit" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#FFFFFF">
<tspan x="172" y="95">Submit</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 978 B

33
thumbnails/clickable-tile.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>clickable-tile</title>
<defs>
<polygon id="path-1" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-25.6%" y="-15.2%" width="156.3%" height="137.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-13.7%" y="-5.3%" width="127.4%" height="117.7%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="clickable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="72" y="41" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="85" y="54" width="90" height="8"></rect>
<g id="Group" transform="translate(212.000000, 97.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<polygon id="Arrow" fill="#000000" points="13.7560605 14.4 18 14.4 8.4 4.8 8.4 18 11.4024434 14.9975566 14.1576509 21.4884188 16.3668625 20.5506641"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

33
thumbnails/composed-modal.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>composed-modal</title>
<defs>
<rect id="path-1" x="60" y="44" width="200" height="90"></rect>
<filter x="-5.0%" y="-8.9%" width="110.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="6.53025 6 9 3.53025 8.46975 3 6 5.46975 3.53025 3 3 3.53025 5.46975 6 3 8.46975 3.53025 9 6 6.53025 8.46975 9 9 8.46975"></polygon>
</defs>
<g id="composed-modal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle-Copy" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="color/gray/10-copy-11" transform="translate(60.000000, 44.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="200" height="90"></rect>
</g>
<g id="checkbox" transform="translate(69.000000, 76.000000)" fill="#161616">
<path d="M9.75,1.5 L2.25,1.5 C1.83578644,1.5 1.5,1.83578644 1.5,2.25 L1.5,9.75 C1.5,10.1642136 1.83578644,10.5 2.25,10.5 L9.75,10.5 C10.1642136,10.5 10.5,10.1642136 10.5,9.75 L10.5,2.25 C10.5,1.83578644 10.1642136,1.5 9.75,1.5 Z M2.25,9.75 L2.25,2.25 L9.75,2.25 L9.75,9.75 L2.25,9.75 Z" id="Fill"></path>
</g>
<g id="icon/navigation/close/16-copy-3" transform="translate(239.000000, 53.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-5" fill="#8D8D8D" x="70" y="57" width="58" height="7"></rect>
<rect id="Rectangle-Copy-20" fill="#C6C6C6" x="160" y="108" width="101" height="26"></rect>
<rect id="Rectangle-Copy-21" fill="#A8A8A8" x="88" y="79" width="96" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

73
thumbnails/context-menu.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>context-menu</title>
<defs>
<polygon id="path-1" points="56 32 142.96332 32 162 32 162 147 56 147"></polygon>
<filter x="-9.4%" y="-7.0%" width="118.9%" height="117.4%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="0 4.88498131e-14 83.681685 -1.70974346e-13 102 -1.70974346e-13 102 55 0 55"></polygon>
<filter x="-9.8%" y="-14.5%" width="119.6%" height="136.4%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-5" points="4.875 3.375 7.875 6 4.875 8.625"></polygon>
<polygon id="path-7" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<filter x="-55.8%" y="-33.1%" width="222.8%" height="181.1%" filterUnits="objectBoundingBox" id="filter-8">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-9" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<filter x="-29.9%" y="-11.6%" width="159.7%" height="138.7%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="context-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-4" x="56" y="111" width="13.65" height="17"></rect>
<g id="Rectangle-2-Copy-17">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#F3F3F3" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-2-Copy-28" fill="#DCDCDC" opacity="0.6" x="56" y="35" width="105" height="16"></rect>
<rect id="Rectangle-2-Copy-29" fill="#C6C6C6" opacity="0.6" x="56" y="54" width="106" height="1"></rect>
<rect id="Rectangle-2-Copy-30" fill="#C6C6C6" opacity="0.6" x="56" y="109" width="106" height="1"></rect>
<rect id="Rectangle-3-Copy-9" fill="#8D8D8D" x="65.45" y="41" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-14" fill="#BEBEBE" x="65.45" y="118" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-15" fill="#BEBEBE" x="65.45" y="134" width="52" height="4"></rect>
<rect id="Rectangle-3-Copy-10" fill="#BEBEBE" x="65.45" y="64" width="52" height="4"></rect>
<rect id="Rectangle-3-Copy-11" fill="#BEBEBE" x="65.45" y="80" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-12" fill="#BEBEBE" x="65.45" y="96" width="52" height="4"></rect>
<g id="Rectangle-2-Copy-17" transform="translate(162.000000, 32.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#F3F3F3" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-3-Copy-13" fill="#BEBEBE" x="183.45" y="41" width="51" height="4"></rect>
<rect id="Rectangle-3-Copy-16" fill="#BEBEBE" x="183.45" y="57" width="43.05" height="4"></rect>
<rect id="Rectangle-2-Copy-33" fill="#DCDCDC" opacity="0.6" x="162" y="67" width="103" height="16"></rect>
<rect id="Rectangle-3-Copy-17" fill="#8D8D8D" x="183.45" y="73" width="51" height="4"></rect>
<g id="icon/navigation/caret/right/16" transform="translate(140.000000, 37.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
</g>
<g id="icon/hover-states/arrow-cursor" transform="translate(241.000000, 70.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-8)" xlink:href="#path-7"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-10)" xlink:href="#path-9"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<polygon id="Arrow" fill="#000000" points="6.30486108 6.6 8.25 6.6 3.85 2.2 3.85 8.25 5.22611988 6.87388012 6.48892333 9.8488586 7.50147867 9.41905436"></polygon>
</g>
<polygon id="Path" fill="#000000" points="172.642857 45 170.5 42.8742857 171.181429 42.2142857 172.642857 43.65 175.818571 40.5 176.5 41.1771429"></polygon>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

46
thumbnails/expandable-tile.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>expandable-tile</title>
<defs>
<filter x="-54.7%" y="-48.6%" width="209.4%" height="197.2%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<polygon id="path-2" points="5 0 10 5 9.293 5.707 5 1.414 0.707 5.707 0 5"></polygon>
</defs>
<g id="expandable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(72.000000, 33.000000)">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="0" y="8" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="13" y="21" width="90" height="8"></rect>
<rect id="Rectangle-Copy-5" x="13" y="0" width="90" height="8"></rect>
<g transform="translate(153.000000, 90.000000)" fill="#FFFFFF" id="hand-cursor">
<g filter="url(#filter-1)" transform="translate(4.000000, 2.000000)">
<polygon id="Rectangle" points="7 4 10 4 10 8 7 8"></polygon>
<polygon id="Rectangle-Copy" points="10 7 13 7 13 11 10 11"></polygon>
<path d="M13.2815687,10.7869723 C13.2793405,10.8536671 13.2719207,10.9325894 13.2592869,11.023739 C13.2280924,11.2519911 13.1705384,11.4609684 13.0866028,11.6506708 C12.819221,12.2583277 12.3420114,12.5621673 11.6549961,12.5621673 C11.2561516,12.5621673 10.9546118,12.5695705 10.7503544,12.5843989 L10.5631872,12.5843989 L10.5631872,11.6506708 L10.5631872,9.9832991 M10.5631872,11.6506708 C10.560959,11.7173657 10.5535391,11.7962879 10.5409053,11.8874376 C10.5097108,12.1156896 10.4521569,12.3246669 10.3682213,12.5143693 C10.1008395,13.1220485 9.62362982,13.4258659 8.93661459,13.4258659 C8.53777008,13.4258659 8.23623026,13.4332912 8.03197286,13.4480975 L7.8448056,13.4480975 L7.8448056,10.8469976 M7.8448056,13.4480975 L7.8448056,16.2292735 C7.84331272,16.2959684 7.83662817,16.3748906 7.82475197,16.466018 C7.79578561,16.6942701 7.74266576,16.9032474 7.66543698,17.0929498 C7.43444139,17.6605898 7.0337475,17.9629621 6.463333,18 C5.89365381,17.9629621 5.49333871,17.6605898 5.26234312,17.0929498 C5.18509206,16.9032474 5.1319945,16.6942479 5.10302813,16.466018 C5.09112964,16.3748684 5.08408859,16.2959684 5.08186041,16.2292735 L5.08186041,7.93576665 C3.06312787,10.4279316 0.851739859,10.1112215 4.4408921e-15,8.1137102 C2.40124447,5.97131542 4.45574138,3.84533708 5.26234312,0 L14.1505595,0.0222316227 C14.4558204,0.863320603 14.8049096,1.37327819 15.1978049,2.81166418 C15.5914577,4.25005017 15.8569679,5.81524778 15.9943798,8.51490042 L15.9999503,9.64871318 C16.0006856,9.72430069 15.9932657,9.81916303 15.9776685,9.93327795 C15.9464739,10.16153 15.88892,10.3705073 15.8049844,10.5602097 C15.5376026,11.1678666 15.0603929,11.4717062 14.3733777,11.4717062 C13.9745332,11.4717062 13.6729934,11.4791094 13.468736,11.4939379 L13.2815687,11.5161695 L13.2815687,10.7869723 C13.2815687,10.7780796 13.2782264,9.23853974 13.2782264,9.23853974 L13.2815687,8.89283801 M13.2715419,8.69386498 L13.3043009,9.23853974" id="Shape" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 9.000000) scale(1, -1) translate(-8.000000, -9.000000) "></path>
</g>
</g>
<g transform="translate(144.000000, 79.000000)" id="icon/navigation/chevron/up/16-copy-46">
<g transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) " id="Group">
<g id="chevron--up" transform="translate(3.000000, 5.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-2"></use>
<g id="Group" mask="url(#mask-3)">
<g transform="translate(-3.000000, -5.000000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="40" height="40"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) " points="1.77635684e-15 -7.90206676e-15 16 -7.90206676e-15 16 16 1.77635684e-15 16"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

77
thumbnails/fluid-form.svg Normal file
View file

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>form</title>
<defs>
<polygon id="path-1" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-3" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-5" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
</defs>
<g id="form" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="color/gray/10-copy-12" transform="translate(90.000000, 32.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="152" height="116"></rect>
</g>
<rect id="Rectangle-Copy-6" fill="#A8A8A8" x="99" y="41" width="48.59854" height="5"></rect>
<rect id="Rectangle-Copy-14" fill="#C6C6C6" x="99" y="52" width="89" height="3"></rect>
<rect id="Rectangle-Copy-26" fill="#C6C6C6" x="99" y="58" width="72.7591241" height="3"></rect>
<rect id="Rectangle-25-Copy-22" stroke="#006AFF" stroke-width="1.14" fill="#FFFFFF" x="90.57" y="72.57" width="150.86" height="14.86"></rect>
<rect id="Rectangle-Copy-27" fill="#C6C6C6" x="99" y="78" width="62.9489051" height="3"></rect>
<rect id="Rectangle-Copy-28" fill="#C6C6C6" x="99" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-30" fill="#C6C6C6" x="111" y="112" width="38.948905" height="3"></rect>
<rect id="Rectangle-Copy-29" fill="#C6C6C6" x="172" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-56" fill="#C6C6C6" x="91" y="104" width="151" height="1"></rect>
<rect id="Rectangle-Copy-57" fill="#C6C6C6" x="163" y="88" width="1" height="16"></rect>
<g id="Group" transform="translate(228.000000, 76.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(228.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Group" mask="url(#mask-4)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(149.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-5"></use>
<g id="Group" mask="url(#mask-6)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<rect id="Rectangle-Copy-24" fill="#0F6DFF" x="166" y="130" width="76" height="18"></rect>
<rect id="Rectangle-Copy-25" fill="#3D3D3D" x="90" y="130" width="75" height="18"></rect>
<g id="checkbox" transform="translate(97.000000, 109.000000)" fill="#161616">
<path d="M7.3125,1.125 L1.6875,1.125 C1.37683983,1.125 1.125,1.37683983 1.125,1.6875 L1.125,7.3125 C1.125,7.62316017 1.37683983,7.875 1.6875,7.875 L7.3125,7.875 C7.62316017,7.875 7.875,7.62316017 7.875,7.3125 L7.875,1.6875 C7.875,1.37683983 7.62316017,1.125 7.3125,1.125 Z M1.6875,7.3125 L1.6875,1.6875 L7.3125,1.6875 L7.3125,7.3125 L1.6875,7.3125 Z" id="Fill"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

16
thumbnails/image-loader.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>image-loader</title>
<defs>
<path d="M14.25,10.5 C13.0073593,10.5 12,9.49264069 12,8.25 C12,7.00735931 13.0073593,6 14.25,6 C15.4926407,6 16.5,7.00735931 16.5,8.25 C16.5,8.8467371 16.2629471,9.41903341 15.8409903,9.84099026 C15.4190334,10.2629471 14.8467371,10.5 14.25,10.5 L14.25,10.5 Z M14.25,7.5 C13.8357864,7.5 13.5,7.83578644 13.5,8.25 C13.5,8.66421356 13.8357864,9 14.25,9 C14.6642136,9 15,8.66421356 15,8.25 C15,7.83578644 14.6642136,7.5 14.25,7.5 Z M19.6125,3 L4.3875,3 C3.62120491,3 3,3.62120491 3,4.3875 L3,19.6125 C3,19.9804879 3.14618262,20.3334039 3.40638934,20.5936107 C3.66659607,20.8538174 4.01951212,21 4.3875,21 L19.6125,21 C19.9804879,21 20.3334039,20.8538174 20.5936107,20.5936107 C20.8538174,20.3334039 21,19.9804879 21,19.6125 L21,4.3875 C21,3.62120491 20.3787951,3 19.6125,3 Z M19.5,4.5 L19.5,15.9975 L16.695,13.1925 C16.4136476,12.9108344 16.0318639,12.75257 15.63375,12.75257 C15.2356361,12.75257 14.8538524,12.9108344 14.5725,13.1925 L13.5,14.2875 L9.375,10.1925 C9.09364761,9.91083444 8.71186387,9.75257002 8.31375,9.75257002 C7.91563613,9.75257002 7.53385239,9.91083444 7.2525,10.1925 L4.5,12.945 L4.5,4.5 L19.5,4.5 Z M4.5,19.5 L4.5,15.06 L8.31,11.25 L8.31,11.25 L12.4125,15.3525 C12.6938524,15.6341656 13.0756361,15.79243 13.47375,15.79243 C13.8718639,15.79243 14.2536476,15.6341656 14.535,15.3525 L15.63,14.25 L15.63,14.25 L19.5,18.12 L19.5,19.5 L4.5,19.5 Z" id="path-1"></path>
</defs>
<g id="image-loader" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-29" fill="#BEBEBE" x="60" y="36" width="200" height="109"></rect>
<g id="icon/formatting/image/16-copy" transform="translate(148.000000, 79.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#8E8E93" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

23
thumbnails/inline-notification.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>inline-notification</title>
<defs>
<circle id="path-1" cx="5" cy="5" r="4.375"></circle>
<polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
</defs>
<g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

22
thumbnails/local-storage.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>local-storage</title>
<g id="local-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Button" transform="translate(86.000000, 106.000000)">
<rect id="Background" fill="#0F62FE" x="0" y="0" width="148" height="32"></rect>
<text id="Label" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="16" letter-spacing="0.137142854" fill="#FFFFFF">
<tspan x="16" y="20">Clear storage</tspan>
</text>
</g>
<g id="Group" transform="translate(86.000000, 60.000000)">
<g>
<rect id="pill" fill="#8D8D8D" x="0" y="0" width="32" height="16" rx="8"></rect>
<circle id="handle" fill="#FFFFFF" cx="8" cy="8" r="5"></circle>
</g>
<text id="Text" font-family="IBMPlexSans, IBM Plex Sans" font-size="14" font-weight="normal" line-spacing="18" letter-spacing="0.159999996" fill="#161616">
<tspan x="40" y="13">Off</tspan>
</text>
</g>
<rect id="Rectangle-3-Copy-6" fill="#A8A8A8" opacity="0.754768008" x="86" y="42" width="70" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

12
thumbnails/ordered-list.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ordered-list</title>
<g id="ordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="1.-Ordered-List-2.-O" fill="#161616">
<tspan x="113" y="70">1. Ordered List</tspan>
<tspan x="113" y="86">2. Ordered List </tspan>
<tspan x="113" y="102">3. Ordered List</tspan>
<tspan x="113" y="118">4. Ordered List </tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 768 B

27
thumbnails/password-input.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>password-input</title>
<defs>
<path d="M15.47,7.83 C14.266932,4.72169147 11.330606,2.626562 8,2.5 C4.66939395,2.626562 1.73306803,4.72169147 0.53,7.83 C0.490283624,7.9398538 0.490283624,8.0601462 0.53,8.17 C1.73306803,11.2783085 4.66939395,13.373438 8,13.5 C11.330606,13.373438 14.266932,11.2783085 15.47,8.17 C15.5097164,8.0601462 15.5097164,7.9398538 15.47,7.83 Z M8,12.5 C5.35,12.5 2.55,10.535 1.535,8 C2.55,5.465 5.35,3.5 8,3.5 C10.65,3.5 13.45,5.465 14.465,8 C13.45,10.535 10.65,12.5 8,12.5 Z M8,5 C6.34314575,5 5,6.34314575 5,8 C5,9.65685425 6.34314575,11 8,11 C9.65685425,11 11,9.65685425 11,8 C11,6.34314575 9.65685425,5 8,5 Z M8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 C9.1045695,6 10,6.8954305 10,8 C10,8.53043298 9.78928632,9.03914081 9.41421356,9.41421356 C9.03914081,9.78928632 8.53043298,10 8,10 Z" id="path-1"></path>
</defs>
<g id="password-input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-21" transform="translate(56.000000, 75.000000)">
<rect id="Rectangle-11-Copy" fill="#F3F3F3" x="0" y="0" width="208" height="32"></rect>
<line x1="0" y1="31.5" x2="208" y2="31.5" id="Path-3-Copy-8" stroke="#8C8C8C"></line>
</g>
<g id="Group" transform="translate(234.000000, 83.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
</g>
<circle id="Oval" fill="#161616" cx="71.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy" fill="#161616" cx="80.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-2" fill="#161616" cx="89.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-3" fill="#161616" cx="98.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-4" fill="#161616" cx="107.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-5" fill="#161616" cx="116.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-6" fill="#161616" cx="125.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-7" fill="#161616" cx="134.5" cy="91.5" r="2.5"></circle>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

35
thumbnails/radio-tile.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>radio-tile</title>
<defs>
<circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
</defs>
<g id="radio-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
<rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

14
thumbnails/recursive-list.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>recursive-list</title>
<g id="recursive-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="–-Item-1-•-Item-1a-•" fill="#161616">
<tspan x="120" y="54">– Item 1</tspan>
<tspan x="120" y="70"> • Item 1a</tspan>
<tspan x="120" y="86"> • Item 1b</tspan>
<tspan x="120" y="102">– Item 2</tspan>
<tspan x="120" y="118"> • Item 2a</tspan>
<tspan x="120" y="134"> • Item 2b</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 863 B

47
thumbnails/selectable-tile.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>selectable-tile</title>
<defs>
<circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
<circle id="path-5" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-7" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
</defs>
<g id="selectable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
<rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 41.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-7"></use>
</g>
<rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
thumbnails/skeleton-placeholder.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-placeholder</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="118" y="48" width="85" height="85"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="117" y="48" width="56.4662577" height="85"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(177.733129, 90.500000) scale(-1, 1) translate(-177.733129, -90.500000) " x="173.466258" y="48" width="8.533742" height="85"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

15
thumbnails/skeleton-text.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-text</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 989 B

15
thumbnails/skeleton.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

34
thumbnails/toast-notification.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>toast-notification</title>
<defs>
<circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
<polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
</defs>
<g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
<rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
<g id="Group" transform="translate(73.000000, 68.000000)">
<g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
<g id="error--filled" transform="translate(0.875000, 0.875000)">
<g id="icon-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
</g>
<g id="icon-1" transform="translate(2.625000, 2.625000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
</g>
</g>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
<rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
<rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

27
thumbnails/tooltip-icon.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>tooltip-icon</title>
<defs>
<path d="M7.03125,8.90625 L7.03125,4.6875 L5.15625,4.6875 L5.15625,5.625 L6.09375,5.625 L6.09375,8.90625 L4.6875,8.90625 L4.6875,9.84375 L8.4375,9.84375 L8.4375,8.90625 L7.03125,8.90625 L7.03125,8.90625 Z M6.5625,2.34375 C6.17417479,2.34375 5.859375,2.65854979 5.859375,3.046875 C5.859375,3.43520021 6.17417479,3.75 6.5625,3.75 C6.95082521,3.75 7.265625,3.43520021 7.265625,3.046875 C7.265625,2.65854979 6.95082521,2.34375 6.5625,2.34375 L6.5625,2.34375 Z M6.5625,13.125 C2.93813133,13.125 0,10.1868687 0,6.5625 C0,2.93813133 2.93813133,0 6.5625,0 C10.1868687,0 13.125,2.93813133 13.125,6.5625 C13.1209442,10.1851874 10.1851874,13.1209442 6.5625,13.125 Z M6.5625,0.9375 C3.45589828,0.9375 0.9375,3.45589828 0.9375,6.5625 C0.9375,9.66910172 3.45589828,12.1875 6.5625,12.1875 C9.66910172,12.1875 12.1875,9.66910172 12.1875,6.5625 C12.1840384,3.45733327 9.66766673,0.940961641 6.5625,0.9375 Z" id="path-1"></path>
</defs>
<g id="tooltip-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-56-Copy" transform="translate(100.000000, 78.700000)">
<path d="M80.3,-38.1 C81.1284271,-38.1 81.8,-37.4284271 81.8,-36.6 L81.8,54.4 C81.8,55.2284271 81.1284271,55.9 80.3,55.9 L75.161,55.9 L70.4045455,61.1 L65.647,55.9 L60.3,55.9 C59.4715729,55.9 58.8,55.2284271 58.8,54.4 L58.8,-36.6 C58.8,-37.4284271 59.4715729,-38.1 60.3,-38.1 L80.3,-38.1 Z" id="Rectangle-24" fill="#3D3D3D" transform="translate(70.300000, 11.500000) rotate(90.000000) translate(-70.300000, -11.500000) "></path>
<g id="Group" transform="translate(0.000000, 4.300000)">
<g id="information" transform="translate(0.937500, 0.937500)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-0.937500, -0.937500)" id="icon-color">
<rect id="Rectangle-3-Copy" fill="#161616" x="0" y="0" width="37.5" height="37.5"></rect>
</g>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="15" height="15"></rect>
</g>
<rect id="Rectangle-Copy" fill="#BEBEBE" x="35" y="9.3" width="59" height="5"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

9
thumbnails/truncate.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>truncate</title>
<g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="22">
<text id="Truncate…" fill="#161616">
<tspan x="131" y="92">Truncate…</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 528 B

12
thumbnails/unordered-list.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>unordered-list</title>
<g id="unordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="–-Unordered-List-–-U" fill="#161616">
<tspan x="113" y="70">– Unordered List</tspan>
<tspan x="113" y="86">– Unordered List</tspan>
<tspan x="113" y="102">– Unordered List</tspan>
<tspan x="113" y="118">– Unordered List </tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 779 B