mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-08-29 10:58:22 +02:00
feat(docs): finetune some design guide images & add icons to use case guide
This commit is contained in:
Karsa
@@ -249,6 +249,7 @@ html {
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.example-guidance__text svg.lucide {
|
||||
|
||||
@@ -2,6 +2,11 @@
|
||||
description: Learn the best practices for writing use cases for Lucide icons.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { batteryLow, creditCard, crop, handshake, heading2, microchip, search, squareParking, triangleAlert, wifiOff } from '~/.vitepress/data/iconNodes';
|
||||
import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
|
||||
</script>
|
||||
|
||||
# Use case guide
|
||||
|
||||
This guide will teach you how to write the best use cases for Lucide icons.
|
||||
@@ -11,10 +16,10 @@ This guide will teach you how to write the best use cases for Lucide icons.
|
||||
Describe what the interface communicates to the user. Do not write from the contributor's personal point of view.
|
||||
|
||||
:::: example
|
||||
::: do Indicating a device is offline or unreachable
|
||||
::: do <LucideIcon :iconNode="wifiOff" /> Indicating a device is offline or unreachable
|
||||
This describes the **role the icon plays in an interface**.
|
||||
:::
|
||||
::: dont I need an icon for my offline device screen
|
||||
::: dont <LucideIcon :iconNode="wifiOff" /> I need an icon for my offline device screen
|
||||
This explains the **contributor's situation**, not the icon's reusable purpose.
|
||||
:::
|
||||
::::
|
||||
@@ -24,10 +29,10 @@ This explains the **contributor's situation**, not the icon's reusable purpose.
|
||||
A use case should explain what the icon means in context. Do not repeat the icon name or describe only the drawing.
|
||||
|
||||
:::: example
|
||||
::: do Representing processors, chips, or embedded hardware
|
||||
::: do <LucideIcon :iconNode="microchip" /> Representing processors, chips, or embedded hardware
|
||||
This makes `microchip` useful in search and documentation **without restating the name**.
|
||||
:::
|
||||
::: dont it's a microchip icon
|
||||
::: dont <LucideIcon :iconNode="microchip" /> it's a microchip icon
|
||||
This **duplicates the icon name** and does not explain where the icon would be used.
|
||||
:::
|
||||
::::
|
||||
@@ -37,10 +42,10 @@ This **duplicates the icon name** and does not explain where the icon would be u
|
||||
Some icons have broad meanings. Add a short context when it makes the use case easier to understand.
|
||||
|
||||
:::: example
|
||||
::: do Applying a level-2 heading in text editors
|
||||
::: do <LucideIcon :iconNode="heading2" /> Applying a level-2 heading in text editors
|
||||
The phrase explains both the **action and the product area**.
|
||||
:::
|
||||
::: dont Applying a heading
|
||||
::: dont <LucideIcon :iconNode="heading2" /> Applying a heading
|
||||
This is understandable, but less useful because it **omits the level and interface context**.
|
||||
:::
|
||||
::::
|
||||
@@ -50,10 +55,10 @@ This is understandable, but less useful because it **omits the level and interfa
|
||||
Each entry should contain one clear idea. Split genuinely different meanings into separate entries.
|
||||
|
||||
:::: example
|
||||
::: do Marking parking locations on maps
|
||||
::: do <LucideIcon :iconNode="squareParking" /> Marking parking locations on maps
|
||||
This is **short, concrete, and focused** on one interface function.
|
||||
:::
|
||||
::: dont Marking parking, transport, maps, cars, garages, and places
|
||||
::: dont <LucideIcon :iconNode="squareParking" /> Marking parking, transport, maps, cars, garages, and places
|
||||
This reads like a **tag list** and **mixes several concepts** into one use case.
|
||||
:::
|
||||
::::
|
||||
@@ -63,10 +68,10 @@ This reads like a **tag list** and **mixes several concepts** into one use case.
|
||||
Related icons should describe what makes each variant different.
|
||||
|
||||
:::: example
|
||||
::: do Indicating a low battery charge level
|
||||
::: do <LucideIcon :iconNode="batteryLow" /> Indicating a low battery charge level
|
||||
This is specific to `battery-low` and **distinguishes** it from other battery icons.
|
||||
:::
|
||||
::: dont Representing battery status
|
||||
::: dont <LucideIcon :iconNode="batteryLow" /> Representing battery status
|
||||
This is **too generic** and could apply to **every battery variant**.
|
||||
:::
|
||||
::::
|
||||
@@ -76,10 +81,10 @@ This is **too generic** and could apply to **every battery variant**.
|
||||
Use cases should stand on their own after the PR is merged.
|
||||
|
||||
:::: example
|
||||
::: do Signifying a deal, agreement, or partnership
|
||||
::: do <LucideIcon :iconNode="handshake" /> Signifying a deal, agreement, or partnership
|
||||
This preserves the **useful meaning** without depending on **outside context**.
|
||||
:::
|
||||
::: dont Same as above in #1234
|
||||
::: dont <LucideIcon :iconNode="handshake" /> Same as above in #1234
|
||||
This **depends on a discussion** that readers **may never see**.
|
||||
:::
|
||||
::::
|
||||
@@ -89,10 +94,10 @@ This **depends on a discussion** that readers **may never see**.
|
||||
Use cases should usually be 4 to 12 words. Prefer one strong phrase over a long explanation.
|
||||
|
||||
:::: example
|
||||
::: do Searching files by name or content
|
||||
::: do <LucideIcon :iconNode="search" /> Searching files by name or content
|
||||
This is **short enough** to scan and **specific enough** to understand.
|
||||
:::
|
||||
::: dont This icon can be used when users want to search through all of their files and folders to find something
|
||||
::: dont <LucideIcon :iconNode="search" /> This icon can be used when users want to search through all of their files and folders to find something
|
||||
This is **too long** and reads like **product copy instead of metadata**.
|
||||
:::
|
||||
::::
|
||||
@@ -102,10 +107,10 @@ This is **too long** and reads like **product copy instead of metadata**.
|
||||
Use cases are metadata phrases, not full sentences.
|
||||
|
||||
:::: example
|
||||
::: do Confirming a successful payment
|
||||
::: do <LucideIcon :iconNode="creditCard" /> Confirming a successful payment
|
||||
This matches the **phrase style** used across icon metadata.
|
||||
:::
|
||||
::: dont Confirming a successful payment.
|
||||
::: dont <LucideIcon :iconNode="creditCard" /> Confirming a successful payment.
|
||||
The period adds **unnecessary punctuation** and makes entries inconsistent.
|
||||
:::
|
||||
::::
|
||||
@@ -115,10 +120,10 @@ The period adds **unnecessary punctuation** and makes entries inconsistent.
|
||||
Use plain text only. Formatting belongs in documentation, not metadata values.
|
||||
|
||||
:::: example
|
||||
::: do Warning users about a destructive action
|
||||
::: do <LucideIcon :iconNode="triangleAlert" /> Warning users about a destructive action
|
||||
This works in search, generated pages, and other **metadata consumers**.
|
||||
:::
|
||||
::: dont <span>**Warning** users about a destructive action ⚠️</span>
|
||||
::: dont <LucideIcon :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
|
||||
Markdown and emoji can **leak into generated UI** and make metadata **harder to reuse**.
|
||||
:::
|
||||
::::
|
||||
@@ -128,10 +133,10 @@ Markdown and emoji can **leak into generated UI** and make metadata **harder to
|
||||
Use cases should describe meaning, not how the SVG was built.
|
||||
|
||||
:::: example
|
||||
::: do Representing cropped or trimmed content
|
||||
::: do <LucideIcon :iconNode="crop" /> Representing cropped or trimmed content
|
||||
This explains the icon's **interface meaning**.
|
||||
:::
|
||||
::: dont Showing a rectangle with two path cuts and adjusted Bezier handles
|
||||
::: dont <LucideIcon :iconNode="crop" /> Showing a rectangle with two path cuts and adjusted Bezier handles
|
||||
This describes **construction details** that do not help users find or understand the icon.
|
||||
:::
|
||||
::::
|
||||
|
||||
@@ -1,8 +1,29 @@
|
||||
---
|
||||
description: Learn how to choose clear and consistent names for Lucide icons.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { arrowDown01, badgePlus, badgeCheck, sendHorizontal, heartCrack, circleDashed, circleUser, clock3, userRound, save, ban, pencilRuler } from '~/.vitepress/data/iconNodes';
|
||||
import {
|
||||
arrowDown01,
|
||||
badgeCheck,
|
||||
badgePlus,
|
||||
ban,
|
||||
boneFracture,
|
||||
circleDashed,
|
||||
circleFadingArrowUp,
|
||||
circleUser,
|
||||
clock3,
|
||||
heartCrack,
|
||||
moonStar,
|
||||
notepadTextDashed,
|
||||
pencilRuler,
|
||||
rulerDimensionLine,
|
||||
save,
|
||||
sendHorizontal,
|
||||
squareDashed,
|
||||
sunSnow,
|
||||
userRound,
|
||||
} from '~/.vitepress/data/iconNodes';
|
||||
import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
|
||||
const pencilRulerHorizontal = [
|
||||
["path",{"d":"M10 16v-3","key":"1sz6hv"}],
|
||||
@@ -79,14 +100,16 @@ Ban is an action.
|
||||
::::
|
||||
|
||||
::: tip
|
||||
An icon can represent different actions or concepts depending on where and how it is used. Naming icons for their visual appearance keeps names unambiguous and independent of their use case.
|
||||
An icon can represent different actions or concepts depending on where and how it is used. Naming
|
||||
icons for their visual appearance keeps names unambiguous and independent of their use case.
|
||||
:::
|
||||
|
||||
## 4. Name related icons consistently
|
||||
|
||||
Icons that belong to the same group **must** use the `<group>-<variant>` naming scheme.
|
||||
|
||||
The group name comes first, followed by the part that distinguishes the icon from the rest of the group.
|
||||
The group name comes first, followed by the part that distinguishes the icon from the rest of the
|
||||
group.
|
||||
|
||||
:::: example
|
||||
::: do <span><LucideIcon :iconNode="badgePlus" /> + <LucideIcon :iconNode="badgeCheck" /></span> <span>`badge-plus` & `badge-check`</span>
|
||||
@@ -99,7 +122,8 @@ The group name comes first, followed by the part that distinguishes the icon fro
|
||||
|
||||
## 5. Describe alternate icons
|
||||
|
||||
Alternate versions of an icon **must** be named for what makes them visually distinct. They **must not** use numbers merely to distinguish one version from another.
|
||||
Alternate versions of an icon **must** be named for what makes them visually distinct. They **must
|
||||
not** use numbers merely to distinguish one version from another.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="sendHorizontal" /> `send-horizontal`
|
||||
@@ -132,7 +156,6 @@ The icon doesn't feature the number 3.
|
||||
:::
|
||||
::::
|
||||
|
||||
|
||||
Numerals must not be used to distinguish between otherwise similarly named icons.
|
||||
|
||||
## 7. Order elements by size
|
||||
@@ -142,11 +165,11 @@ When an icon depicts multiple elements of different sizes, their names **must**
|
||||
For an icon containing a circle and a person:
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="circleUser" /> `circle-person`
|
||||
The circle is larger.
|
||||
::: do <LucideIcon :iconNode="moonStar" /> `moon-star`
|
||||
The `moon` is larger than the `star`.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="circleUser" /> `person-circle`
|
||||
The person is **not** larger.
|
||||
The `person` is **not** larger than the `circle`.
|
||||
:::
|
||||
::::
|
||||
|
||||
@@ -160,19 +183,19 @@ If they do not overlap, name them in English reading order: top to bottom, then
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="pencilRuler" /> `pencil-ruler`
|
||||
The pencil is in front of the ruler.
|
||||
The `pencil` is **in front** of the `ruler`, so **it takes precedence**.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="pencilRuler" /> `ruler-pencil`
|
||||
The ruler is **not** in front of the pencil.
|
||||
::: do <LucideIcon :iconNode="rulerDimensionLine" /> `ruler-dimension-line`
|
||||
While the ruler is below the dimension line, it is **reasonably larger**, so it should be listed first.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="pencilRulerVertical" /> `pencil-ruler`
|
||||
The pencil is left of the ruler.
|
||||
::: do <LucideIcon :iconNode="sunSnow" /> `sun-snow`
|
||||
The `sun` is **left of** the `snowflake`, so **it should be listed first**.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="pencilRulerHorizontal" /> `ruler-pencil`
|
||||
The ruler is **not** above the pencil.
|
||||
The `ruler` is **below** the `pencil`, so `pencil-ruler` would be the correct name.
|
||||
:::
|
||||
::::
|
||||
|
||||
@@ -181,31 +204,31 @@ The ruler is **not** above the pencil.
|
||||
Modifiers **must** follow the element they describe, using the `<element>-<modifier>` naming scheme.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="circleDashed" /> `circle-dashed`
|
||||
::: do <LucideIcon :iconNode="heartCrack" /> `heart-broken`
|
||||
The icon depicts a heart that is **cracked**.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="circleDashed" /> `dashed-circle`
|
||||
::: dont <LucideIcon :iconNode="boneFracture" /> `broken-bone`
|
||||
The icon depicts a bone that is **broken**, so it should be `bone-broken`.
|
||||
:::
|
||||
::::
|
||||
|
||||
When an icon contains multiple modified elements, each modifier **must** follow its respective element.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="heartCrack" /> `heart-broken`
|
||||
::: do <LucideIcon :iconNode="circleFadingArrowUp" /> `circle-fading-arrow-up`
|
||||
The icon depicts a circle, which is **fading**, inside it is an arrow pointing **up**.
|
||||
- `circle` comes first, because it is larger than `arrow`
|
||||
- `fading` follows `circle` because it modifies the circle.
|
||||
- `up` follows `arrow` because it modifies the arrow.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="heartCrack" /> `broken-heart`
|
||||
::: dont <LucideIcon :iconNode="notepadTextDashed" /> `notepad-text-dashed`
|
||||
This icon depicting a dashed notebook with text inside should be named `notepad-dashed-text`.
|
||||
- `notepad` comes first, because it is larger than `text`
|
||||
- `dashed` follows `notepad` because it modifies the notepad.
|
||||
- `text` should follow both `notepad` and `dashed`, because `dashed` does not modify `text`.
|
||||
:::
|
||||
::::
|
||||
|
||||
When an icon contains multiple modified elements, each modifier follows its respective element.
|
||||
|
||||
For example, a dashed circle containing a smaller broken heart is named:
|
||||
|
||||
`circle-dashed-heart-broken`
|
||||
|
||||
This follows both the element ordering and modifier rules:
|
||||
|
||||
- `circle` comes before `heart` because it is larger.
|
||||
- `dashed` follows `circle` because it modifies the circle.
|
||||
- `broken` follows `heart` because it modifies the heart.
|
||||
|
||||
## TL;DR
|
||||
|
||||
When naming an icon:
|
||||
@@ -216,9 +239,6 @@ When naming an icon:
|
||||
4. **Describe what makes an alternate unique** instead of numbering it.
|
||||
5. **Only use numerals when they are depicted** in the icon.
|
||||
6. **Order elements from largest to smallest**.
|
||||
7. If elements are roughly the same size, order them **front to back**, or otherwise in **English reading order**.
|
||||
7. If elements are roughly the same size, order them **front to back**, or otherwise in **English
|
||||
reading order**.
|
||||
8. **Place modifiers after the element they describe**: `<element>-<modifier>`.
|
||||
|
||||
For example, a dashed circle containing a smaller broken heart becomes:
|
||||
|
||||
`circle-dashed-heart-broken`
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<path d="M141.504 49V47C141.504 46.4696 141.293 45.9609 140.918 45.5858C140.543 45.2107 140.034 45 139.504 45C138.973 45 138.465 45.2107 138.09 45.5858C137.715 45.9609 137.504 46.4696 137.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.4 KiB |
@@ -1,14 +1,17 @@
|
||||
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<path d="M141.504 34V41H134.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M148.504 49V47C148.504 46.4696 148.715 45.9609 149.09 45.5858C149.465 45.2107 149.973 45 150.504 45C151.034 45 151.543 45.2107 151.918 45.5858C152.293 45.9609 152.504 46.4696 152.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M147.504 49H153.504C154.056 49 154.504 49.4477 154.504 50V53C154.504 53.5523 154.056 54 153.504 54H147.504C146.952 54 146.504 53.5523 146.504 53V50C146.504 49.4477 146.952 49 147.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.2 KiB |
@@ -1,10 +1,13 @@
|
||||
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<path d="M147.504 49L152.504 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.4 KiB |
@@ -1,10 +1,13 @@
|
||||
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -1,12 +1,15 @@
|
||||
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<path d="M141.504 49V47C141.504 46.4696 141.293 45.9609 140.918 45.5858C140.543 45.2107 140.034 45 139.504 45C138.973 45 138.465 45.2107 138.09 45.5858C137.715 45.9609 137.504 46.4696 137.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.4 KiB |
@@ -1,12 +1,15 @@
|
||||
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
|
||||
<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"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.3 KiB |
Reference in New Issue
Block a user