assets/component-abstraction-example-design.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="602px" height="85px" version="1.1" style="background-color: rgb(255, 255, 255);"><defs/><g transform="translate(0.5,0.5)"><rect x="0.5" y="0" width="597" height="80" rx="12" ry="12" fill="#000000" stroke="none" transform="translate(2,3)" opacity="0.25"/><rect x="0.5" y="0" width="597" height="80" rx="12" ry="12" fill="#1d8bf1" stroke="none" pointer-events="none"/><path d="M 79.81 34.7 L 81.66 34.7 L 78.89 37.47 L 77.05 34.7 L 77.97 34.7 C 77.94 28.64 82.45 23.51 88.46 22.75 C 94.48 22 100.11 25.86 101.58 31.74 C 103.05 37.62 99.89 43.67 94.23 45.83 C 88.57 48 82.18 45.59 79.35 40.23 L 80.92 39.31 C 83.25 43.89 88.64 45.99 93.46 44.22 C 98.28 42.44 101.01 37.33 99.81 32.34 C 98.61 27.34 93.87 24.03 88.76 24.64 C 83.66 25.24 79.82 29.56 79.81 34.7 Z M 89.03 30.09 L 90.87 30.09 L 90.87 34.42 L 96.04 39.03 L 94.93 40.32 L 89.03 35.16 Z" fill="#ffffff" stroke="none" pointer-events="none"/><g transform="translate(64.5,48.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="51" height="14" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; white-space: nowrap; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;"><font style="font-size: 14px">Recents</font></div></div></foreignObject><text x="26" y="12" fill="#FFFFFF" text-anchor="middle" font-size="10px" font-family="Helvetica">[Not supported by viewer]</text></switch></g><path d="M 288.86 36.73 C 287 34.47 286.5 31.06 287.6 28.17 C 288.7 25.28 291.16 23.5 293.81 23.7 C 296.45 23.9 298.71 26.04 299.5 29.07 C 300.29 26.04 302.55 23.9 305.19 23.7 C 307.84 23.5 310.3 25.28 311.4 28.17 C 312.5 31.06 312 34.47 310.14 36.73 L 299.5 49.5 Z" fill="#ffffff" stroke="none" pointer-events="none"/><g transform="translate(270.5,51.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="58" height="14" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; white-space: nowrap; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;"><font style="font-size: 14px">Favorites</font></div></div></foreignObject><text x="29" y="12" fill="#FFFFFF" text-anchor="middle" font-size="10px" font-family="Helvetica">[Not supported by viewer]</text></switch></g><path d="M 495.1 35.5 C 495.1 28.32 500.92 22.5 508.1 22.5 C 515.28 22.5 521.1 28.32 521.1 35.5 C 521.1 42.68 515.28 48.5 508.1 48.5 C 500.92 48.5 495.1 42.68 495.1 35.5 Z M 508.1 46.33 C 514.08 46.33 518.93 41.48 518.93 35.5 C 518.93 29.52 514.08 24.67 508.1 24.67 C 502.12 24.67 497.27 29.52 497.27 35.5 C 497.27 41.48 502.12 46.33 508.1 46.33 Z M 508.1 43.08 L 503.23 35.5 C 502.5 33.84 502.65 31.93 503.63 30.4 C 504.61 28.88 506.29 27.95 508.1 27.92 C 509.91 27.95 511.59 28.88 512.57 30.4 C 513.55 31.93 513.7 33.84 512.98 35.5 Z M 508.1 34.42 C 508.7 34.42 509.18 33.93 509.18 33.33 C 509.18 32.74 508.7 32.25 508.1 32.25 C 507.5 32.25 507.02 32.74 507.02 33.33 C 507.02 33.93 507.5 34.42 508.1 34.42 Z" fill="#ffffff" stroke="none" pointer-events="none"/><g transform="translate(485.5,48.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="45" height="14" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; white-space: nowrap; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;"><font style="font-size: 14px">Nearby</font></div></div></foreignObject><text x="23" y="12" fill="#FFFFFF" text-anchor="middle" font-size="10px" font-family="Helvetica">[Not supported by viewer]</text></switch></g></g></svg>