Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-08-29 12:18:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): finetune some design guide images & make

Browse Source
This commit is contained in:
Karsa
2026-08-25 13:13:49 +02:00
parent 04612398e7
commit c777a587ce
6 changed files with 28 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/images/established-shapes-base-do.svg
View File

@@ -1,15 +1,11 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<g opacity="0.9">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<g opacity="0.5">
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<path d="M136.504 41.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

14
docs/images/established-shapes-base-dont.svg
View File

@@ -1,15 +1,11 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<g opacity="0.9">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<g opacity="0.5">
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<path d="M150.504 41V36C150.504 35.4696 150.293 34.9609 149.918 34.5858C149.543 34.2107 149.034 34 148.504 34H140.504L134.504 40V52C134.504 52.5304 134.715 53.0391 135.09 53.4142C135.465 53.7893 135.973 54 136.504 54H142.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 34V39C141.504 40.1046 140.608 41 139.504 41H134.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

14
docs/images/established-shapes-consistency-do.svg
View File

@@ -1,15 +1,9 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 51H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M49 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.5" d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46M46 34C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52M52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 51H52M49 48V54" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<g opacity="0.5">
<path d="M100.797 38L88.7969 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.7969 38L100.797 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path d="M100.797 38L88.7969 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.7969 38L100.797 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<path d="M143.504 54H138.504C137.973 54 137.465 53.7893 137.09 53.4142C136.715 53.0391 136.504 52.5304 136.504 52V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V45" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

14
docs/images/established-shapes-consistency-dont.svg
View File

@@ -1,15 +1,9 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 51H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M49 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.5" d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46M46 34C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52M52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 51H52M49 48V54" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<g opacity="0.5">
<path d="M100.797 38L88.7969 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.7969 38L100.797 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path d="M100.797 38L88.7969 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.7969 38L100.797 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<path d="M148.504 54H150.504C151.034 54 151.543 53.7893 151.918 53.4142C152.293 53.0391 152.504 52.5304 152.504 52V45.35V40C152.505 39.6831 152.443 39.3692 152.322 39.0764C152.2 38.7836 152.022 38.5177 151.798 38.294L148.21 34.706C147.986 34.4815 147.72 34.3036 147.428 34.1824C147.135 34.0612 146.821 33.9992 146.504 34H138.504C137.973 34 137.465 34.2107 137.09 34.5858C136.715 34.9609 136.504 35.4696 136.504 36V42" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M136.504 46.0016L140.502 50M140.502 50L144.501 53.9983M140.502 50L144.501 46.0016M140.502 50L136.504 53.9983" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

14
docs/images/established-shapes-sub-do.svg
View File

@@ -1,15 +1,11 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<g opacity="0.9">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<g opacity="0.5">
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<path d="M136.504 41.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

14
docs/images/established-shapes-sub-dont.svg
View File

@@ -1,15 +1,11 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<g opacity="0.9">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<g opacity="0.5">
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<path d="M136.504 37.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504M146.504 34C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504M152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 46V44C142.504 42.3431 141.161 41 139.504 41C137.847 41 136.504 42.3431 136.504 44V46M142.504 46H136.504M142.504 46C143.608 46 144.504 46.8954 144.504 48V52C144.504 53.1046 143.608 54 142.504 54H136.504C135.399 54 134.504 53.1046 134.504 52V48C134.504 46.8954 135.399 46 136.504 46M139.504 50V50.01" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB