mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-08-29 10:58:22 +02:00
feat(docs): added new contribution guide
This commit is contained in:
Karsa
@@ -4,6 +4,7 @@ import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-i
|
||||
import sidebar from './sidebar';
|
||||
import snackPlayer from './markdown/snackPlayer';
|
||||
import sandpackPlugin from './markdown/sandpack';
|
||||
import examplePlugin from './markdown/example';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { resourcesSidebar } from './sidebar/resources';
|
||||
import llmstxt from 'vitepress-plugin-llms';
|
||||
@@ -31,6 +32,7 @@ export default defineConfig({
|
||||
config(md) {
|
||||
md.use(groupIconMdPlugin);
|
||||
md.use(snackPlayer);
|
||||
md.use(examplePlugin);
|
||||
md.use(sandpackPlugin, {
|
||||
defaultFiles: {
|
||||
'/styles.css': {
|
||||
@@ -96,7 +98,7 @@ export default defineConfig({
|
||||
text: 'Resources',
|
||||
items: [
|
||||
...resourcesSidebar[0].items,
|
||||
{ text: 'Design icons', link: '/contribute/icons/' },
|
||||
{ text: 'Contributing icons', link: '/contribute/icons/' },
|
||||
],
|
||||
},
|
||||
{ text: 'Packages', link: '/packages' },
|
||||
|
||||
204
docs/.vitepress/markdown/example.ts
Normal file
204
docs/.vitepress/markdown/example.ts
Normal file
@@ -0,0 +1,204 @@
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { dirname, isAbsolute, resolve } from 'node:path';
|
||||
import type MarkdownIt from 'markdown-it';
|
||||
import type { RenderRule } from 'markdown-it/lib/renderer.mjs';
|
||||
import container from 'markdown-it-container';
|
||||
|
||||
type ContainerArgs = [typeof container, string, { render: RenderRule }];
|
||||
|
||||
const parseInfo = (info: string, marker: string) => info.trim().slice(marker.length).trim();
|
||||
|
||||
const stripWrappingQuotes = (value: string) => {
|
||||
const quote = value[0];
|
||||
|
||||
if ((quote === '"' || quote === "'") && value.at(-1) === quote) {
|
||||
return value.slice(1, -1);
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
const isRawSvgUrl = (url: string) => {
|
||||
const [filePath, query = ''] = url.split('?');
|
||||
const params = new URLSearchParams(query);
|
||||
|
||||
return filePath.endsWith('.svg') && params.get('raw') === 'true';
|
||||
};
|
||||
|
||||
const isImageUrl = (value: string) => {
|
||||
const [filePath] = value.split('?');
|
||||
|
||||
return /\.(avif|gif|jpe?g|png|svg|webp)$/i.test(filePath);
|
||||
};
|
||||
|
||||
const resolveMarkdownPath = (env: Record<string, unknown>) =>
|
||||
(env.path as string | undefined) ??
|
||||
(env.file as string | undefined) ??
|
||||
(env.realPath as string | undefined);
|
||||
|
||||
const renderImage = (
|
||||
url: string,
|
||||
env: Record<string, unknown>,
|
||||
escapeAttr: (value: string) => string,
|
||||
) => {
|
||||
if (!isRawSvgUrl(url)) {
|
||||
return `<img class="example-guidance__image" src="${escapeAttr(url)}" alt="" loading="lazy">`;
|
||||
}
|
||||
|
||||
const [filePath] = url.split('?');
|
||||
const markdownPath = resolveMarkdownPath(env);
|
||||
const resolvedPath = isAbsolute(filePath)
|
||||
? resolve(process.cwd(), `.${filePath}`)
|
||||
: resolve(markdownPath ? dirname(markdownPath) : process.cwd(), filePath);
|
||||
const svg = readFileSync(resolvedPath, 'utf8');
|
||||
const replacedSvg = svg
|
||||
.replaceAll(/(#000(000)?|black)/g, 'currentColor')
|
||||
.replaceAll(' stroke="#D8D8D9"', 'style="stroke: currentColor; stroke-opacity: .25;"');
|
||||
|
||||
return `<div class="example-guidance__image example-guidance__image--raw">${replacedSvg}</div>`;
|
||||
};
|
||||
|
||||
const renderPreview = (
|
||||
value: string,
|
||||
env: Record<string, unknown>,
|
||||
escapeHtml: (value: string) => string,
|
||||
renderInline: (value: string) => string,
|
||||
) => {
|
||||
if (isImageUrl(value)) {
|
||||
return renderImage(value, env, escapeHtml);
|
||||
}
|
||||
|
||||
return `<div class="example-guidance__text">${renderInline(value)}</div>`;
|
||||
};
|
||||
|
||||
const hasTopLevelContent = (tokens: Parameters<RenderRule>[0], index: number) => {
|
||||
let guidanceDepth = 0;
|
||||
|
||||
for (let i = index + 1; i < tokens.length; i += 1) {
|
||||
const token = tokens[i];
|
||||
|
||||
if (token.type === 'container_example_close') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
|
||||
guidanceDepth += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.type === 'container_do_close' || token.type === 'container_dont_close') {
|
||||
guidanceDepth -= 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (guidanceDepth === 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const hasGuidance = (tokens: Parameters<RenderRule>[0], index: number) => {
|
||||
for (let i = index + 1; i < tokens.length; i += 1) {
|
||||
const token = tokens[i];
|
||||
|
||||
if (token.type === 'container_example_close') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const isFirstGuidance = (tokens: Parameters<RenderRule>[0], index: number) => {
|
||||
for (let i = index - 1; i >= 0; i -= 1) {
|
||||
const token = tokens[i];
|
||||
|
||||
if (token.type === 'container_example_open') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const getExampleOpenIndex = (tokens: Parameters<RenderRule>[0], index: number) => {
|
||||
for (let i = index; i >= 0; i -= 1) {
|
||||
if (tokens[i].type === 'container_example_open') {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return index;
|
||||
};
|
||||
|
||||
export default function examplePlugin(md: MarkdownIt) {
|
||||
const escapeHtml = md.utils.escapeHtml;
|
||||
|
||||
const createExampleContainer = (): ContainerArgs => [
|
||||
container,
|
||||
'example',
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
|
||||
if (token.nesting === 1) {
|
||||
const hasContent = hasTopLevelContent(tokens, idx);
|
||||
const guidanceOnlyClass = hasContent ? '' : ' example-block--guidance-only';
|
||||
const contentOpen = hasContent ? '<div class="example-block__content">\n' : '';
|
||||
|
||||
return `<section class="example-block${guidanceOnlyClass}">\n${contentOpen}`;
|
||||
}
|
||||
|
||||
const exampleOpenIndex = getExampleOpenIndex(tokens, idx);
|
||||
const contentClose =
|
||||
hasTopLevelContent(tokens, exampleOpenIndex) && !hasGuidance(tokens, exampleOpenIndex)
|
||||
? '</div>\n'
|
||||
: '';
|
||||
|
||||
return `${contentClose}</section>\n`;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const createGuidanceContainer = (type: 'do' | 'dont'): ContainerArgs => [
|
||||
container,
|
||||
type,
|
||||
{
|
||||
render(tokens, idx, _options, env) {
|
||||
const token = tokens[idx];
|
||||
|
||||
if (token.nesting === 1) {
|
||||
const exampleOpenIndex = getExampleOpenIndex(tokens, idx);
|
||||
const preview = stripWrappingQuotes(parseInfo(token.info, type));
|
||||
const media = renderPreview(preview, env, escapeHtml, md.renderInline.bind(md));
|
||||
const contentClose =
|
||||
hasTopLevelContent(tokens, exampleOpenIndex) && isFirstGuidance(tokens, idx)
|
||||
? '</div>\n'
|
||||
: '';
|
||||
const label =
|
||||
type === 'do'
|
||||
? `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg> Do`
|
||||
: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> Don't`;
|
||||
|
||||
return `${contentClose}<figure class="example-guidance example-guidance--${type}">${media}<figcaption class="example-guidance__caption"><div class="example-guidance__label">${label}</div>\n`;
|
||||
}
|
||||
|
||||
return '</figcaption></figure>\n';
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
md.use(...createExampleContainer());
|
||||
md.use(...createGuidanceContainer('do'));
|
||||
md.use(...createGuidanceContainer('dont'));
|
||||
}
|
||||
@@ -25,7 +25,7 @@ export const resourcesSidebar = [
|
||||
text: 'Contribute',
|
||||
items: [
|
||||
{
|
||||
text: 'Contributing',
|
||||
text: 'Contribution guide',
|
||||
link: '/contribute/',
|
||||
},
|
||||
|
||||
@@ -39,26 +39,41 @@ export const resourcesSidebar = [
|
||||
link: '/contribute/icons/',
|
||||
},
|
||||
{
|
||||
text: 'Design Principles',
|
||||
text: 'Design Language',
|
||||
link: '/contribute/icons/design-principles',
|
||||
desc: 'Learn the visual principles that make Lucide icons consistent and recognizable.',
|
||||
},
|
||||
{
|
||||
text: 'SVG Code conventions',
|
||||
link: '/contribute/icons/code-conventions',
|
||||
text: 'Design Specification',
|
||||
link: '/contribute/icons/specification',
|
||||
desc: 'Reference the concrete requirements that Lucide icons must or should follow.',
|
||||
},
|
||||
{
|
||||
text: 'Writing icon metadata',
|
||||
text: 'Naming conventions',
|
||||
link: '/contribute/icons/naming-conventions',
|
||||
desc: 'Learn how to choose clear, consistent, and predictable names for Lucide icons.',
|
||||
},
|
||||
{
|
||||
text: 'Metadata conventions',
|
||||
link: '/contribute/icons/metadata-conventions',
|
||||
desc: 'Learn how to write tags, categories, aliases, and other metadata for Lucide icons.',
|
||||
},
|
||||
{
|
||||
text: 'SVG conventions',
|
||||
link: '/contribute/icons/code-conventions',
|
||||
desc: 'Learn how SVG files should be structured and written for the Lucide repository.',
|
||||
},
|
||||
{
|
||||
text: 'Design software guides',
|
||||
collapsed: false,
|
||||
desc: 'Learn how to design and export Lucide icons using common vector design tools.',
|
||||
items: [{
|
||||
text: 'Illustrator',
|
||||
text: 'Adobe Illustrator',
|
||||
link: '/contribute/icons/illustrator-guide',
|
||||
desc: '',
|
||||
},
|
||||
{
|
||||
text: ' Inkscape',
|
||||
text: 'Inkscape',
|
||||
link: '/contribute/icons/inkscape-guide',
|
||||
},
|
||||
{
|
||||
@@ -71,7 +86,6 @@ export const resourcesSidebar = [
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -183,3 +183,133 @@ html {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.custom-block.success {
|
||||
border-color: transparent;
|
||||
color: var(--vp-c-text-1);
|
||||
background-color: var(--vp-c-success-soft);
|
||||
}
|
||||
/* Example guidance blocks */
|
||||
.example-block {
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
.example-block__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.example-block > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.example-block > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.example-block__content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.example-block__content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.example-guidance__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-bottom: 4px solid var(--vp-c-divider);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.example-guidance__image--raw svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.example-guidance__text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 160px;
|
||||
padding: 24px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.example-guidance__caption {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.example-guidance__caption > p {
|
||||
margin: 0;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.example-guidance__label {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
margin: 0 0 8px;
|
||||
background-color: var(--example-guidance-label-bg);
|
||||
color: var(--vp-c-neutral-inverse);
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
|
||||
.example-guidance--do {
|
||||
--example-guidance-label-bg: var(--vp-c-success-1);
|
||||
}
|
||||
|
||||
.example-guidance--dont {
|
||||
--example-guidance-label-bg: var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.example-block {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.example-block__content {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.example-guidance {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.example-block {
|
||||
grid-template-columns: minmax(0, 0.9fr) repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.example-block--guidance-only {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.example-block__content {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.example-guidance {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,5 +14,5 @@ This guide describes how to use the Affinity Designer template for Lucide.
|
||||
2. Follow the [Icon Design Principles](design-principles.md) while you use the template (to ensure integrity with the Lucide icon pack).
|
||||
3. Export the file as SVG (`File > Export`). Make sure that _Rastering_ is set to _Nothing_, _Export text as curves_ is checked (hopefully, you won't need this), _Use hex colors_ is checked, and _Flatten transforms_ is checked.
|
||||
|
||||
|
||||
|
||||
4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`).
|
||||
|
||||
@@ -31,13 +31,14 @@ We recommend to use [Lucide Studio](https://studio.lucide.dev/?utm_source=lucide
|
||||
|
||||
SVG files may only contain simple path and shape elements, which may not have any attributes other than sizing and spacing.\
|
||||
In practice only the following elements and attributes are allowed:
|
||||
* `<path d>`
|
||||
* `<line x1 x2>`
|
||||
* `<polygon points>`
|
||||
* `<polyline points>`
|
||||
* `<circle cx cy r>`
|
||||
* `<ellipse cx cy rx ry>`
|
||||
* `<rect x y width height rx>`
|
||||
|
||||
- `<path d>`
|
||||
- `<line x1 x2>`
|
||||
- `<polygon points>`
|
||||
- `<polyline points>`
|
||||
- `<circle cx cy r>`
|
||||
- `<ellipse cx cy rx ry>`
|
||||
- `<rect x y width height rx>`
|
||||
|
||||
This also means that no transforms, filters, fills or explicit strokes are allowed.
|
||||
|
||||
@@ -45,24 +46,40 @@ Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
|
||||
|
||||
## JSON metadata descriptor
|
||||
|
||||
<!-- TODO: Add use-case explanation -->
|
||||
Each icon added must also come with a matching JSON file listing contributors, use cases, tags and categories for the icon.
|
||||
|
||||
Each icon added must also come with a matching JSON file listing tags and categories for the icon.
|
||||
Please use the following template:
|
||||
Please use consult [our metadata conventions page](./metadata-conventions.md) for more information about this file.
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"github-username",
|
||||
"another-github-username"
|
||||
],
|
||||
"tags": [
|
||||
"foo",
|
||||
"bar"
|
||||
],
|
||||
"categories": [
|
||||
"devices"
|
||||
]
|
||||
}
|
||||
## Validation
|
||||
|
||||
Before submitting SVG changes, format and validate the icon files:
|
||||
|
||||
```sh
|
||||
pnpm run lint:icons
|
||||
```
|
||||
|
||||
You can automatically format SVG files with Prettier:
|
||||
|
||||
```sh
|
||||
pnpm run lint:icons-fix
|
||||
```
|
||||
|
||||
To check icon names, categories, metadata, and SVG structure together, run:
|
||||
|
||||
```sh
|
||||
pnpm run lint:icons:all
|
||||
```
|
||||
|
||||
## Checklist
|
||||
|
||||
Before opening a PR, confirm that:
|
||||
|
||||
- The SVG uses the standard `24` by `24` viewBox.
|
||||
- The SVG uses `fill="none"` and `stroke="currentColor"`.
|
||||
- Stroke width, line caps, and line joins match the Lucide defaults.
|
||||
- Paths are tidy and use appropriate numeric precision.
|
||||
- Only allowed SVG elements and attributes are used.
|
||||
- The SVG does not use transforms, filters, fills, explicit strokes, or `<use>`.
|
||||
- The icon has a matching JSON metadata file.
|
||||
- `pnpm run lint:icons` passes.
|
||||
- `pnpm run lint:json:icons` passes.
|
||||
|
||||
@@ -1,132 +1,402 @@
|
||||
---
|
||||
description: Guidelines and best practices for designing icons for the Lucide icon library.
|
||||
description: Learn the visual principles that make Lucide icons consistent and recognizable.
|
||||
---
|
||||
# Icon Design Principles
|
||||
|
||||
Guidelines and best practices for designing icons for the Lucide icon library.
|
||||
# Lucide Design Language
|
||||
|
||||
## Icon Design Principles
|
||||
Lucide is designed as a consistent icon set, not just a collection of individual icons. Every icon should feel like it belongs alongside the rest of the library.
|
||||
|
||||
Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
|
||||
This guide explains the visual principles behind Lucide icons and how to apply them when designing new icons.
|
||||
|
||||
### 1. Icons must be designed on a **24 by 24 pixels** canvas.
|
||||
For concrete requirements such as canvas size, stroke width, spacing, and corner radii, see the [Icon Design Specification](./specification).
|
||||
|
||||
|
||||
|
||||
### 2. Icons must have at least **1 pixel padding** within the canvas.
|
||||
## 1. Use a 24 × 24 pixel canvas
|
||||
|
||||
|
||||
:::: example
|
||||
|
||||
### 3. Icons must have a **stroke width of 2 pixels**.
|
||||
Icons **must** be designed on a 24 × 24 pixel canvas.
|
||||
|
||||
|
||||
::: do ../../images/24px-24px.svg?raw=true
|
||||
Use a **24 × 24 pixel** canvas.
|
||||
:::
|
||||
|
||||
### 4. Icons must use **round joins**.
|
||||
::: dont ../../images/24px-24px-violation.svg?raw=true
|
||||
Use a larger or smaller canvas, or one that's not square.
|
||||
:::
|
||||
|
||||
|
||||
::::
|
||||
|
||||
### 5. Icons must use **round caps**.
|
||||
|
||||
|
||||
## 2. Keep 1 pixel of safe zone
|
||||
|
||||
### 6. Icons must use **centered strokes**.
|
||||
:::: example
|
||||
|
||||
|
||||
Icons **must** have at least 1 pixel of padding between their strokes and the edge of the canvas.
|
||||
|
||||
### 7. Shapes (such as rectangles) must have a **border radius of**
|
||||
::: do ../../images/1px-padding.svg?raw=true
|
||||
Keep at least **1 pixel of padding** around the icon.
|
||||
:::
|
||||
|
||||
#### A. **2 pixels** if they are at least 8 pixels in size
|
||||
::: dont ../../images/0px-padding.svg?raw=true
|
||||
Failing to keep this safe zone will result in trimmed visuals.
|
||||
:::
|
||||
|
||||
|
||||
::::
|
||||
|
||||
#### B. **1 pixel** if they are smaller than 8 pixels in size
|
||||
## 3. Use 2 pixel strokes
|
||||
|
||||
|
||||
:::: example
|
||||
|
||||
### 8. Distinct elements must have **2 pixels of spacing between each other**
|
||||
Strokes **must** be 2 pixels wide.
|
||||
|
||||
|
||||
::: do ../../images/2px-stroke.svg?raw=true
|
||||
Use a **2 pixel stroke width**.
|
||||
:::
|
||||
|
||||
|
||||
::: dont ../../images/2px-stroke-violation.svg?raw=true
|
||||
Avoid thicker or thinner strokes.
|
||||
:::
|
||||
|
||||
|
||||
::::
|
||||
|
||||
### 9. Icons should have a similar optical volume to `circle` and `square`.
|
||||
|
||||
|
||||
## 4. Use round line joins
|
||||
|
||||
|
||||
:::: example
|
||||
|
||||
|
||||
Strokes **must** use round line joins.
|
||||
|
||||
**Tip:** place your icon next to the circle or square icon and blur them both; your icon should not feel much darker than the base shape.
|
||||
::: do ../../images/round-joints.svg?raw=true
|
||||
Use **round line joins**.
|
||||
:::
|
||||
|
||||
### 10. Icons should be visually centered by their center of gravity.
|
||||
::: dont ../../images/round-joints-violation.svg?raw=true
|
||||
You **must not** use **miter or bevel** line joins.
|
||||
:::
|
||||
|
||||
|
||||
::::
|
||||
|
||||
|
||||
## 5. Use round line caps
|
||||
|
||||
**Tip:** place your icon both above/below and next to the square or circle icon and check if it feels off center. Symmetrical icons should always be aligned to the center.
|
||||
:::: example
|
||||
|
||||
### 11. Icons should have similar visual density and level of detail.
|
||||
Open paths **must** use round line caps.
|
||||
|
||||
|
||||
::: do ../../images/round-caps.svg?raw=true
|
||||
Use **round line caps** on open paths.
|
||||
:::
|
||||
|
||||
|
||||
::: dont ../../images/round-caps-violation.svg?raw=true
|
||||
You **must not** use **butt or square** line caps.
|
||||
:::
|
||||
|
||||
**Tip:** try to make abstractions to dense elements. Blur your icon, and when blurred it should not feel overly dark.
|
||||
::::
|
||||
|
||||
### 12. Continuous curves should join smoothly.
|
||||
## 6. Use centered strokes
|
||||
|
||||
|
||||
:::: example
|
||||
|
||||
|
||||
Strokes **must** be centered on their paths.
|
||||
|
||||
**Tip:** make sure to use arcs or quadratic curves. When using cubic curves control points should have mirrored angles for smooth curves.
|
||||
::: do ../../images/centered-strokes.svg?raw=true
|
||||
Keep strokes **centered** on their paths.
|
||||
:::
|
||||
|
||||
### 13. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays.
|
||||
::: dont ../../images/centered-strokes-violation.svg?raw=true
|
||||
You **must not** use **inside or outside** strokes.
|
||||
:::
|
||||
|
||||
|
||||
::::
|
||||
|
||||
|
||||
## 7. Use consistent corner radii
|
||||
|
||||
**Tip:** whenever possible align elements and arc centers to the grid.
|
||||
:::: example
|
||||
|
||||
### 14. Icons should share common shapes
|
||||
Almost all sharp corners **should** be rounded:
|
||||
|
||||
You should try to create consistent groups and variants, reuse and try to create uniformity.
|
||||
Consistency inside groups and variants has a lower priority than the rules above.
|
||||
::: do ../../images/border-radius-correct.svg?raw=true
|
||||
Use rounded corners.
|
||||
:::
|
||||
|
||||
**Example:** All `-off` icons should look the same unless it for example violates the optical volume rule.
|
||||
::: dont ../../images/border-radius-violation.svg?raw=true
|
||||
Avoid sharp corners.
|
||||
:::
|
||||
|
||||
**Tip:** Try to not move the base shape to enable better use in a toggle context.
|
||||
::::
|
||||
|
||||
## Naming conventions
|
||||
:::: example
|
||||
|
||||
1. Icon names use lower kebab case.\
|
||||
For example: `arrow-up` instead of `Arrow Up`.
|
||||
The corner radius depends on the size of the element and the angle. For 90° angles you should:
|
||||
|
||||
2. Icon names use International English names, as opposed to local variants.\
|
||||
For example: `color` instead of `colour`.
|
||||
::: do ../../images/2px-border-radius.svg?raw=true
|
||||
Use a **2 pixel corner radius** for shapes that are at least 8 pixels wide or tall.
|
||||
:::
|
||||
|
||||
3. Icons should be named for what they depict rather than their use case or what they represent.\
|
||||
For example: `floppy-disk` instead of `save` and `circle-slash` rather than `ban`.
|
||||
::: do ../../images/1px-border-radius.svg?raw=true
|
||||
Use a **1 pixel corner radius** for shapes smaller than 8 pixels.
|
||||
:::
|
||||
|
||||
4. Icons that are part of a group are named `<group>-<variant>`.\
|
||||
For example: `badge-plus` is based on `badge`.
|
||||
::::
|
||||
|
||||
5. Icon names for alternate icons should represent what makes the alternate unique instead of being numbered.\
|
||||
For example: `send-horizontal` instead of `send-2`.
|
||||
:::: example
|
||||
|
||||
6. Names containing numerals are not allowed, unless the number itself is represented in the icon.\
|
||||
For example: `arrow-down-0-to-1` contains both numerals.
|
||||
But there are always exceptions to the rule.
|
||||
|
||||
7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\
|
||||
For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.
|
||||
::: do ../../images/border-radius-90deg.svg?raw=true
|
||||
Diagonal lines meeting at a right angle are usually rounded to 2.41 pixels in order to be perfectly grid aligned.
|
||||
:::
|
||||
|
||||
8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements front to back in case one element is in front of the other, otherwise in English reading order (top to bottom, left to right).\
|
||||
For example: if the `pencil` is either in front of, above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
|
||||
::: do ../../images/border-radius-arbitrary.svg?raw=true
|
||||
Even very sharp corners should have a minor amount of rounding applied, but how much exactly will vary on the geometry of the icon.
|
||||
:::
|
||||
|
||||
9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.\
|
||||
For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
Again, _almost_ every sharp corner should be rounded, but there are exceptions to the rule.
|
||||
|
||||
::: do ../../images/border-radius-line-join.svg?raw=true
|
||||
Keep corners sharp if multiple lines meet.
|
||||
:::
|
||||
|
||||
::: dont ../../images/border-radius-line-join-violation.svg?raw=true
|
||||
Make icons consistent at different scales by not rounding these corners.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
## 8. Keep 2 pixels of gap
|
||||
|
||||
:::: example
|
||||
|
||||
Distinct elements **must** have at least 2 pixels of visual spacing between them.
|
||||
|
||||
::: do ../../images/2px-element-spacing.svg?raw=true
|
||||
Keep **2 pixels of spacing** between distinct elements.
|
||||
:::
|
||||
|
||||
::: dont ../../images/1px-element-spacing.svg?raw=true
|
||||
Never use gaps smaller than **2 pixels** between distinct elements.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
This includes the inside of shapes, so most inner gaps **should** be at least 2 pixels wide.
|
||||
|
||||
::: do ../../images/2px-inner-spacing.svg?raw=true
|
||||
Keep at least **2 pixels of spacing** inside shapes.
|
||||
:::
|
||||
|
||||
::: dont ../../images/1px-inner-spacing.svg?raw=true
|
||||
Avoid inner gaps smaller than **2 pixels**.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
You can visualize this by trying to place a 2 pixel wide circle within your shape.
|
||||
|
||||
::: do ../../images/2px-inner-gap.svg?raw=true
|
||||
If a **2 pixel wide circle** fits inside the shape without overlapping, the gap is wide enough.
|
||||
:::
|
||||
|
||||
::: dont ../../images/1px-inner-gap.svg?raw=true
|
||||
If a **2 pixel wide circle** overlaps the shape, the inner gap should be wider.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
|
||||
:::: example
|
||||
|
||||
The 2 pixel spacing also applies when elements visually connect or intersect.
|
||||
|
||||
::: dont ../../images/2px-element-spacing-connected.svg?raw=true
|
||||
Maintain 2 pixels of spacing where elements visually connect.
|
||||
:::
|
||||
|
||||
::: dont ../../images/2px-element-spacing-abrupt-cut.svg?raw=true
|
||||
Avoid abrupt cuts where one element meets another.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
## 9. Aim for uniform volume
|
||||
|
||||
:::: example
|
||||
|
||||
Icons should have a similar visual weight when viewed alongside each other.
|
||||
|
||||
::: do ../../images/visual-weight-consistent.svg?raw=true
|
||||
Match the visual weight of `circle` and `square`.
|
||||
:::
|
||||
|
||||
::: dont ../../images/visual-weight-uneven.svg?raw=true
|
||||
The second icon is **too large**, the fourth is **too small**.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
::: tip
|
||||
|
||||
The amount and distribution of strokes affect how heavy an icon appears. An icon with many closely spaced elements can appear much heavier than a simpler icon, even when both use the same stroke width.
|
||||
|
||||
Place your icon next to `circle` or `square` and blur them. Your icon should not appear significantly lighter or darker than the reference icon.
|
||||
|
||||
:::
|
||||
|
||||
## 10. Balance icons visually
|
||||
|
||||
:::: example
|
||||
|
||||
Icons should appear centered and balanced within the canvas.
|
||||
|
||||
::: do ../../images/visually-centered-do.svg?raw=true
|
||||
Keep your icons visually centered.
|
||||
:::
|
||||
|
||||
::: dont ../../images/visually-centered-dont.svg?raw=true
|
||||
The optical volume of this icon is offset to the top left.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
:::: example
|
||||
Symmetrical icons should remain geometrically centered.
|
||||
|
||||
::: do ../../images/visually-centered-symmetrical-do.svg?raw=true
|
||||
:::
|
||||
|
||||
::: dont ../../images/visually-centered-symmetrical-dont.svg?raw=true
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
|
||||
::: tip
|
||||
Geometric centering does not always produce a visually centered icon. Asymmetrical shapes may need to be moved slightly to compensate for their visual center of gravity.
|
||||
|
||||
Compare your icon with `circle` or `square` both side by side and vertically. If it appears shifted in either direction, adjust its position.
|
||||
:::
|
||||
|
||||
## 11. Keep density low
|
||||
|
||||
:::: example
|
||||
|
||||
Lucide icons should have a similar visual density and level of detail.
|
||||
|
||||
::: do ../../images/density-optimal.svg?raw=true
|
||||
Simplify complex subjects, preserving the features that make them identifiable.
|
||||
:::
|
||||
|
||||
::: dont ../../images/density-too-dense.svg?raw=true
|
||||
Avoid adding unnecessary details that make the design dense.
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
::: tip
|
||||
|
||||
Dense areas and closely spaced strokes can also make an icon appear heavier than surrounding icons.
|
||||
|
||||
View the icon at its intended size and try blurring it. Areas that become noticeably dark may contain too much detail.
|
||||
|
||||
:::
|
||||
|
||||
## 12. Use smooth, simple curves
|
||||
|
||||
|
||||
:::: example
|
||||
|
||||
Curves should be smooth and use the simplest geometry that accurately describes the shape.
|
||||
|
||||
::: do ../../images/curvature-smooth.svg?raw=true
|
||||
Prefer simple arcs and quadratic curves where possible.
|
||||
:::
|
||||
|
||||
::: dont ../../images/curvature-uneven.svg?raw=true
|
||||
Avoid uneven or unnecessarily complex curves.
|
||||
:::
|
||||
::::
|
||||
|
||||
::: tip
|
||||
When cubic Bézier curves are necessary, keep their control points aligned appropriately to avoid visible changes in curvature.
|
||||
|
||||
Avoid unnecessary control points. They make shapes harder to maintain and can introduce subtle irregularities.
|
||||
:::
|
||||
|
||||
## 13. Design for the pixel grid
|
||||
|
||||
:::: example
|
||||
Lucide icons should appear sharp and intentional at small sizes, including on low-density displays.
|
||||
::: do ../../images/pixel-perfection-ideal.svg?raw=true
|
||||
Align coordinates and the centers of arcs and other geometric elements to the pixel grid where possible.
|
||||
:::
|
||||
::: dont ../../images/pixel-perfection-bad.svg?raw=true
|
||||
Avoid placing geometry off the pixel grid without a visual reason.
|
||||
:::
|
||||
::::
|
||||
|
||||
::: tip
|
||||
Pixel alignment should support the overall appearance of the icon rather than come at the expense of recognizable shapes, smooth curves, or visual balance.
|
||||
:::
|
||||
|
||||
## 14. Reuse established shapes
|
||||
|
||||
:::: example
|
||||
When creating variant icons, preserve the geometry of the base icon unless the new concept requires a change.
|
||||
::: do ../../images/established-shapes-base-do.svg?raw=true
|
||||
Reuse existing base icons exactly as they appear.
|
||||
:::
|
||||
::: dont ../../images/established-shapes-base-dont.svg?raw=true
|
||||
Avoid altering the **geometry, placement and orientation** of base shapes.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
Related icons should share the same shapes and visual patterns wherever possible.
|
||||
::: do ../../images/established-shapes-sub-do.svg?raw=true
|
||||
Reuse elements from existing icons without change.
|
||||
:::
|
||||
::: dont ../../images/established-shapes-sub-dont.svg?raw=true
|
||||
Avoid creating new designs for existing elements.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
Common modifiers and elements should behave consistently across both icon sets and the library.
|
||||
::: do ../../images/established-shapes-consistency-do.svg?raw=true
|
||||
Maintain consistency between the placement and size of addons.
|
||||
:::
|
||||
::: dont ../../images/established-shapes-consistency-dont.svg?raw=true
|
||||
Avoid using irregular placements and sizes compared to existing icons.
|
||||
:::
|
||||
::::
|
||||
|
||||
::: tip
|
||||
Preserving the base shape also makes related icons work better when switching between them in an interface.
|
||||
|
||||
Consistency with an existing icon should not override the other principles of the design language. Adjust the shape when necessary to maintain visual weight, balance, clarity, or readability.
|
||||
:::
|
||||
|
||||
## TL;DR
|
||||
|
||||
When designing a Lucide icon:
|
||||
|
||||
1. **Use a 24 × 24 pixel canvas** with at least **1 pixel of safe zone**.
|
||||
2. **Use 2 pixel centered strokes** with **round caps and joins**.
|
||||
3. **Round sharp corners** using consistent radii appropriate for their size and geometry.
|
||||
4. **Keep at least 2 pixels of gap** between distinct elements and, where possible, inside shapes.
|
||||
5. **Match the optical volume** of `circle` and `square`.
|
||||
6. **Center icons visually**, accounting for their center of gravity.
|
||||
7. **Keep visual density low** and remove unnecessary detail.
|
||||
8. **Use smooth, simple curves** without unnecessary control points.
|
||||
9. **Align geometry to the pixel grid** where possible.
|
||||
10. **Reuse established shapes and geometry** from existing Lucide icons.
|
||||
|
||||
When these guidelines conflict, prioritize **clarity, visual balance, and consistency with the rest of Lucide**.
|
||||
|
||||
@@ -28,7 +28,7 @@ Set the following:
|
||||
1. Stroke width: 2px
|
||||
2. Stroke alignment: center
|
||||
|
||||
|
||||
|
||||
|
||||
## Export Or Copy Your Icon
|
||||
Once you have completed your icon, you can export it.
|
||||
|
||||
@@ -24,7 +24,7 @@ The Illustrator template is created following guidelines from the [Icon Design G
|
||||
|
||||
5. Export the file with the export menu under: `Export > Export As..` then save the file as SVG. Select the following options in the SVG Options dialog:
|
||||
|
||||
|
||||
|
||||
|
||||
After that, double check that the [code conventions and SVG global attributes](code-conventions.md) are correct.
|
||||
|
||||
|
||||
@@ -2,11 +2,34 @@
|
||||
title: Contributing Icons
|
||||
description: Guidelines and instructions for contributing icons to Lucide.
|
||||
---
|
||||
<script setup>
|
||||
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
|
||||
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
|
||||
import { resourcesSidebar } from '../../.vitepress/sidebar/resources.ts'
|
||||
</script>
|
||||
|
||||
# Contributing Icons
|
||||
# Designing icons for Lucide
|
||||
|
||||
Before contributing an icon, review the [icon design principles](./design-principles.md), [SVG code conventions](./code-conventions.md), and [metadata conventions](./metadata-conventions.md).
|
||||
Within any icon set, every icon should feel like it belongs alongside the rest of the library.
|
||||
|
||||
You can also use one of the design software guides for [Illustrator](./illustrator-guide.md), [Inkscape](./inkscape-guide.md), [Figma](./figma-guide.md), or [Affinity Designer](./affinity-designer-guide.md).
|
||||
This guide explains how to design and prepare icons for contribution to Lucide.
|
||||
|
||||
For the complete contribution workflow, see the [contribution guide](../index.md).
|
||||
## What's in this guide?
|
||||
|
||||
<OverviewLinkGrid>
|
||||
<OverviewLink v-for="item in resourcesSidebar[2].items.slice(1, -1)" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||||
</OverviewLinkGrid>
|
||||
|
||||
## Designing icons with your preferred software
|
||||
|
||||
You do not need to use any particular design software, you can design Lucide icons with any vector graphics editor that can export SVG.
|
||||
|
||||
We provide step-by-step guides for the following common tools:
|
||||
|
||||
<OverviewLinkGrid>
|
||||
<OverviewLink v-for="item in resourcesSidebar[2].items.at(-1).items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||||
</OverviewLinkGrid>
|
||||
|
||||
These guides explain how to set up your document, work within the Lucide design constraints, and export an SVG suitable for contribution.
|
||||
|
||||
Regardless of which tool you use, the same design and SVG requirements apply.
|
||||
|
||||
@@ -13,11 +13,11 @@ When opening a new document, Inkscape will create a canvas of a default size. T
|
||||
|
||||
1. Open the Document Properties dialog (File -> Document Properties).
|
||||
2. On the “Page Size” tab, under “Custom Size” set the Units to `px` and set both Height and Width to 24.
|
||||
|
||||
|
||||
3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
|
||||
|
||||
|
||||
4. Set the Grid Units to `px` and set Spacing X and Spacing Y both to 1.
|
||||
|
||||
|
||||
5. Close the Document Properties dialog.
|
||||
6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
|
||||
|
||||
@@ -25,17 +25,17 @@ When opening a new document, Inkscape will create a canvas of a default size. T
|
||||
|
||||
1. Create a path or shape.
|
||||
2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
|
||||
|
||||
|
||||
3. On the “Stroke Style” tab:
|
||||
* Set Stroke Width to `2px`.
|
||||
* Select the rounded join type.
|
||||
* Select the rounded cap type.
|
||||
4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
|
||||
|
||||
|
||||
|
||||
## Saving A File
|
||||
|
||||
1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
|
||||
|
||||
|
||||
2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
|
||||
|
||||
|
||||
|
||||
@@ -1,12 +1,36 @@
|
||||
---
|
||||
title: Writing Icon Metadata
|
||||
description: Metadata conventions for icons in the Lucide icon library.
|
||||
description: Learn how to write clear and consistent metadata for Lucide icons.
|
||||
---
|
||||
|
||||
# Writing Icon Metadata
|
||||
# Metadata conventions
|
||||
|
||||
Each icon added must also come with a matching JSON file listing tags and categories for the icon.
|
||||
Please use the following template:
|
||||
Every Lucide icon has a matching JSON metadata file. Metadata helps credit contributors, categorize icons, improve search, and explain where an icon is useful.
|
||||
|
||||
Use this guide when adding a new icon or reviewing metadata for an existing icon.
|
||||
|
||||
## Metadata file location
|
||||
|
||||
Each icon metadata file must live next to its SVG file in the `icons` directory.
|
||||
|
||||
The JSON file must use the same base name as the SVG file:
|
||||
|
||||
- `home.svg` -> `home.json`
|
||||
- `arrow-up.svg` -> `arrow-up.json`
|
||||
- `square-parking.svg` -> `square-parking.json`
|
||||
|
||||
All icon metadata files are validated against `icon.schema.json`.
|
||||
|
||||
## Required fields
|
||||
|
||||
Every icon metadata file must include:
|
||||
|
||||
- `$schema`
|
||||
- `contributors`
|
||||
- `use-cases`
|
||||
- `tags`
|
||||
- `categories`
|
||||
|
||||
A minimal metadata file looks like this:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -15,6 +39,9 @@ Please use the following template:
|
||||
"github-username",
|
||||
"another-github-username"
|
||||
],
|
||||
"use-cases": [
|
||||
"Representing example items in an interface"
|
||||
],
|
||||
"tags": [
|
||||
"foo",
|
||||
"bar"
|
||||
@@ -23,4 +50,261 @@ Please use the following template:
|
||||
"devices"
|
||||
]
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
## Contributors
|
||||
|
||||
The `contributors` field is a list of GitHub usernames for people who created or meaningfully contributed to the icon:
|
||||
|
||||
1. If you create a new icon based on existing ones, add all contributors from all base icons.
|
||||
|
||||
2. Add a username when someone made a significant contribution to the SVG itself.
|
||||
|
||||
3. Do not add people for minor review comments, metadata-only edits, or unrelated discussion.
|
||||
|
||||
## Use cases
|
||||
|
||||
The `use-cases` field explains where and why an icon would be used in a real interface.
|
||||
|
||||
Use cases should be short phrases, not full sentences. Start with a present participle verb such as:
|
||||
|
||||
- Representing...
|
||||
- Indicating...
|
||||
- Marking...
|
||||
- Showing...
|
||||
- Confirming...
|
||||
- Toggling...
|
||||
- Categorizing...
|
||||
- Searching...
|
||||
|
||||
Keep each use case focused on one idea. Prefer 1 to 4 strong use cases over a long list of weak or repetitive ones.
|
||||
|
||||
:::: example
|
||||
|
||||
### Write from the interface's perspective
|
||||
|
||||
Describe what the interface communicates to the user. Do not write from the contributor's personal point of view.
|
||||
|
||||
::: do 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
|
||||
This explains the contributor's situation, not the icon's reusable purpose.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Describe real usage, not the icon name
|
||||
|
||||
A use case should explain what the icon means in context. Do not repeat the icon name or describe only the drawing.
|
||||
|
||||
::: do Representing processors, chips, or embedded hardware
|
||||
This makes `microchip` useful in search and documentation without restating the name.
|
||||
:::
|
||||
|
||||
::: dont microchip
|
||||
This duplicates the icon name and does not explain where the icon would be used.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Add context when it clarifies meaning
|
||||
|
||||
Some icons have broad meanings. Add a short context when it makes the use case easier to understand.
|
||||
|
||||
::: do Applying a level-2 heading in text editors
|
||||
The phrase explains both the action and the product area.
|
||||
:::
|
||||
|
||||
::: dont Applying a heading
|
||||
This is understandable, but less useful because it omits the level and interface context.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Keep each use case focused
|
||||
|
||||
Each entry should contain one clear idea. Split genuinely different meanings into separate entries.
|
||||
|
||||
::: do Marking parking locations on maps
|
||||
This is short, concrete, and focused on one interface function.
|
||||
:::
|
||||
|
||||
::: dont Marking parking, transport, maps, cars, garages, and places
|
||||
This reads like a tag list and mixes several concepts into one use case.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Write variant-specific use cases
|
||||
|
||||
Related icons should describe what makes each variant different.
|
||||
|
||||
::: do Indicating a low battery charge level
|
||||
This is specific to `battery-low` and distinguishes it from other battery icons.
|
||||
:::
|
||||
|
||||
::: dont Representing battery status
|
||||
This is too generic and could apply to every battery variant.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Avoid references that only make sense in a PR
|
||||
|
||||
Use cases should stand on their own after the PR is merged.
|
||||
|
||||
::: do Signifying a deal, agreement, or partnership
|
||||
This preserves the useful meaning without depending on outside context.
|
||||
:::
|
||||
|
||||
::: dont Same as above in #1234
|
||||
This depends on a discussion that readers may never see.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Keep entries concise
|
||||
|
||||
Use cases should usually be 4 to 12 words. Prefer one strong phrase over a long explanation.
|
||||
|
||||
::: do 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
|
||||
This is too long and reads like product copy instead of metadata.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Do not end with punctuation
|
||||
|
||||
Use cases are metadata phrases, not full sentences.
|
||||
|
||||
::: do Confirming a successful payment
|
||||
This matches the phrase style used across icon metadata.
|
||||
:::
|
||||
|
||||
::: dont Confirming a successful payment.
|
||||
The period adds unnecessary punctuation and makes entries inconsistent.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Avoid markdown and emoji
|
||||
|
||||
Use plain text only. Formatting belongs in documentation, not metadata values.
|
||||
|
||||
::: do 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>
|
||||
Markdown and emoji can leak into generated UI and make metadata harder to reuse.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
|
||||
### Avoid implementation details
|
||||
|
||||
Use cases should describe meaning, not how the SVG was built.
|
||||
|
||||
::: do Representing cropped or trimmed content
|
||||
This explains the icon's interface meaning.
|
||||
:::
|
||||
|
||||
::: dont 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.
|
||||
:::
|
||||
::::
|
||||
|
||||
## Tags
|
||||
|
||||
The `tags` field is a list of search terms for the icon.
|
||||
|
||||
Tags should describe concepts, synonyms, related terms, and common contexts that help people find the icon.
|
||||
|
||||
Use existing tags in the repository as a reference before adding new ones. This keeps search behavior consistent and avoids unnecessary duplicates.
|
||||
|
||||
### Tag rules
|
||||
|
||||
- Use lowercase tags.
|
||||
- Prefer single words where possible.
|
||||
- Multi-word tags are allowed when they are clearer, such as `magnifying glass`.
|
||||
- Do not include the icon name as a tag.
|
||||
- Do not add generic tags like `icon`.
|
||||
- Do not add unrelated concepts just to increase search coverage.
|
||||
|
||||
For example, a `mail-search` icon can use tags such as `email`, `message`, `letter`, `find`, and `filter`, but it should not include `mail-search` as a tag.
|
||||
|
||||
## Categories
|
||||
|
||||
The `categories` field groups icons into broad areas of use.
|
||||
|
||||
Categories must come from the allowed category list in `icon.schema.json`.
|
||||
|
||||
Choose categories based on what the icon represents and where it is commonly used. Use existing icon metadata as a reference for similar icons.
|
||||
|
||||
### Category rules
|
||||
|
||||
- Use only categories allowed by `icon.schema.json`.
|
||||
- Use lowercase category names.
|
||||
- Do not invent new categories in icon metadata.
|
||||
- Choose relevant categories only.
|
||||
|
||||
## Variants and related icons
|
||||
|
||||
Related icons should have related metadata, but they should not blindly share identical use cases.
|
||||
|
||||
Write metadata for the specific variant:
|
||||
|
||||
- `battery-low` -> `Indicating a low battery charge level`
|
||||
- `battery-full` -> `Indicating a full battery charge level`
|
||||
- `square-arrow-right-enter` -> sign in, enter, or join contexts
|
||||
- `square-arrow-right-exit` -> sign out, exit, or export contexts
|
||||
|
||||
When a request covers several icons at once, only assign a use case to the icon it actually describes. Do not let metadata from one icon leak into another icon in the same group.
|
||||
|
||||
## Aliases
|
||||
|
||||
Some icons can include an optional `aliases` field for alternate names.
|
||||
|
||||
For the present, we only add aliases to icons when renaming them from non-compliant names.
|
||||
|
||||
## Validation
|
||||
|
||||
Before submitting metadata changes, validate the icon JSON files:
|
||||
|
||||
```sh
|
||||
pnpm run lint:json:icons
|
||||
```
|
||||
|
||||
You can also format changed files with Prettier:
|
||||
|
||||
```sh
|
||||
pnpm exec prettier "icons/*.json" --check
|
||||
```
|
||||
|
||||
## Checklist
|
||||
|
||||
Before opening a PR, confirm that:
|
||||
|
||||
- The JSON file name matches the SVG file name.
|
||||
- The file includes all required fields.
|
||||
- Contributors are GitHub usernames.
|
||||
- Use cases describe real interface usage.
|
||||
- Tags are lowercase and useful for search.
|
||||
- Categories are allowed by `icon.schema.json`.
|
||||
- Metadata is specific to the icon and its variants.
|
||||
- `pnpm run lint:json:icons` passes.
|
||||
|
||||
224
docs/contribute/icons/naming-conventions.md
Normal file
224
docs/contribute/icons/naming-conventions.md
Normal file
@@ -0,0 +1,224 @@
|
||||
---
|
||||
description: Learn how to choose clear and consistent names for Lucide icons.
|
||||
---
|
||||
<script setup>
|
||||
import { arrowDown01, sendHorizontal, heartCrack, circleDashed, circleUser, clock3, userRound, save, ban, pencilRuler } from '~/.vitepress/data/iconNodes';
|
||||
import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
|
||||
const pencilRulerHorizontal = [
|
||||
["path",{"d":"M10 16v-3","key":"1sz6hv"}],
|
||||
["path",{"d":"M14 16v-3","key":"1rh0ni"}],
|
||||
["path",{"d":"M16 2.999v5.98","key":"q5wnuh"}],
|
||||
["path",{"d":"M18 16v-3","key":"gc63g1"}],
|
||||
["path",{"d":"M19.005 2.994A3 3 0 0122 5.984a3 3 0 01-2.986 2.99l-11.777.017a2 2 0 01-.943-.25l-4.03-2.274a.5.5 0 010-.934l4.03-2.274a2 2 0 01.944-.247z","key":"1bk0ej"}],
|
||||
["path",{"d":"M6 16v-3","key":"h6yyjy"}],
|
||||
["rect",{"x":"2","y":"13","width":"20","height":"8","rx":"2","key":"ct2kk9"}]
|
||||
];
|
||||
const pencilRulerVertical = [
|
||||
["path",{"d":"M16 10h-3","key":"4p2xpj"}],
|
||||
["path",{"d":"M16 14h-3","key":"1xsqil"}],
|
||||
["path",{"d":"M16 18h-3","key":"12gup7"}],
|
||||
["path",{"d":"M16 6h-3","key":"1o5sfa"}],
|
||||
["path",{"d":"M2.995 19.005a1 1 0 105.98.01L8.99 7.236a2 2 0 00-.25-.943l-2.274-4.03a.5.5 0 00-.934 0L3.26 6.294a2 2 0 00-.248.944z","key":"rw57er"}],
|
||||
["path",{"d":"M3 16h5.979","key":"kkz6vb"}],
|
||||
["rect",{"x":"13","y":"2","width":"8","height":"20","rx":"2","key":"qzgro9"}]
|
||||
];
|
||||
</script>
|
||||
|
||||
# Naming conventions
|
||||
|
||||
Learn how to choose clear and consistent names for Lucide icons.
|
||||
|
||||
This section covers general naming rules, word order, modifiers, variants, related icons, and other conventions used to keep icon names predictable across the library.
|
||||
|
||||
Use this when naming a new icon or reviewing a proposed name.
|
||||
|
||||
## 1. Use lowercase kebab-case
|
||||
|
||||
Icon names **must** use lowercase kebab-case.
|
||||
|
||||
:::: example
|
||||
::: do `arrow-up-0-1`
|
||||
Use lowercase kebab-case.
|
||||
:::
|
||||
::: dont `Arrow Up 0-1` or `arrowUp01`
|
||||
Avoid other naming schemes.
|
||||
:::
|
||||
::::
|
||||
|
||||
## 2. Use American English
|
||||
|
||||
Icon names **must** use American English names, as opposed to local variants.
|
||||
|
||||
:::: example
|
||||
::: do `color`, `maximize`, `center`
|
||||
:::
|
||||
::: dont `colour`, `maximise`, `centre`
|
||||
:::
|
||||
::::
|
||||
|
||||
## 3. Name icons for what they depict
|
||||
|
||||
Icon names **must** describe what the icon depicts, not its intended use or meaning.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="save" /> `floppy-disk`
|
||||
The icon **depicts** a floppy disk.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="save" /> `save`
|
||||
Save is a use case.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="ban" /> `circle-slash`
|
||||
The icon **depicts** a circle with a slash across it.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="ban" /> `ban`
|
||||
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.
|
||||
:::
|
||||
|
||||
## 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.
|
||||
|
||||
:::: example
|
||||
::: do `badge-plus` & `badge-check`
|
||||
`badge` is the group.
|
||||
:::
|
||||
::: dont `plus-badge` & `check-badge`
|
||||
`plus` and `check` are not the group.
|
||||
:::
|
||||
::::
|
||||
|
||||
## 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.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="sendHorizontal" /> `send-horizontal`
|
||||
The icon depicts a horizontal "send" symbol.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="sendHorizontal" /> `send-2` or `send-alt`
|
||||
"send no. 2" or "alternative send" are not descriptive names.
|
||||
:::
|
||||
::::
|
||||
|
||||
## 6. Only use numerals when depicted
|
||||
|
||||
Icon names **must not** contain numerals unless the numeral itself is depicted in the icon.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="arrowDown01" /> `arrow-down-0-1`
|
||||
The arrow points from 0 to 1.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="sendHorizontal" /> `send-2`
|
||||
The icon doesn't feature the number 2.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="clock3" /> `clock-3`
|
||||
The hands point to 3 o'clock.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="userRound" /> `user-3`
|
||||
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
|
||||
|
||||
When an icon depicts multiple elements of different sizes, their names **must** be ordered from largest to smallest.
|
||||
|
||||
For an icon containing a circle and a person:
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="circleUser" /> `circle-person`
|
||||
The circle is larger.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="circleUser" /> `person-circle`
|
||||
The person is **not** larger.
|
||||
:::
|
||||
::::
|
||||
|
||||
## 8. Order equally sized elements by position
|
||||
|
||||
When an icon depicts multiple elements of roughly equal size, their names **must** be ordered according to their visual position.
|
||||
|
||||
If elements overlap, name them from front to back.
|
||||
|
||||
If they do not overlap, name them in English reading order: top to bottom, then left to right.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="pencilRuler" /> `pencil-ruler`
|
||||
The pencil is in front of the ruler.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="pencilRuler" /> `ruler-pencil`
|
||||
The ruler is **not** in front of the pencil.
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="pencilRulerVertical" /> `pencil-ruler`
|
||||
The pencil is left of the ruler.
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="pencilRulerHorizontal" /> `ruler-pencil`
|
||||
The ruler is **not** above the pencil.
|
||||
:::
|
||||
::::
|
||||
|
||||
## 9. Place modifiers after the element they describe
|
||||
|
||||
Modifiers **must** follow the element they describe, using the `<element>-<modifier>` naming scheme.
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="circleDashed" /> `circle-dashed`
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="circleDashed" /> `dashed-circle`
|
||||
:::
|
||||
::::
|
||||
|
||||
:::: example
|
||||
::: do <LucideIcon :iconNode="heartCrack" /> `heart-broken`
|
||||
:::
|
||||
::: dont <LucideIcon :iconNode="heartCrack" /> `broken-heart`
|
||||
:::
|
||||
::::
|
||||
|
||||
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:
|
||||
|
||||
1. **Describe what you see**, not what the icon could mean or be used for.
|
||||
2. **Use American English** and **lowercase kebab-case**.
|
||||
3. **Keep related icons together** using `<group>-<variant>`.
|
||||
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**.
|
||||
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`
|
||||
95
docs/contribute/icons/specification.md
Normal file
95
docs/contribute/icons/specification.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
description: Technical specification and conformance requirements for Lucide icons.
|
||||
---
|
||||
|
||||
# Icon Design Specification
|
||||
|
||||
This document defines the requirements for icons included in Lucide.
|
||||
|
||||
For explanations, examples, and guidance on applying these requirements, see the [Lucide Design Language](./design-principles).
|
||||
|
||||
## Conformance
|
||||
|
||||
The words **must**, **must not**, **should**, and **should not** indicate the requirement level of each rule:
|
||||
|
||||
- **Must** and **must not** define requirements that an icon is expected to meet.
|
||||
- **Should** and **should not** define requirements that may be deviated from when necessary to produce a better icon.
|
||||
|
||||
Any deviation should be intentional and consistent with the [Lucide Design Language](./design-principles).
|
||||
|
||||
## Canvas
|
||||
|
||||
1. Icons **must** use a 24 × 24 pixel canvas.
|
||||
2. The canvas **must** be square.
|
||||
3. Icon strokes **must** remain at least 1 pixel from the edge of the canvas.
|
||||
|
||||
## Strokes
|
||||
|
||||
1. Strokes **must** be 2 pixels wide.
|
||||
2. Strokes **must** use round line joins.
|
||||
3. Open paths **must** use round line caps.
|
||||
4. Strokes **must** be centered on their paths.
|
||||
|
||||
## Corners
|
||||
|
||||
1. Sharp corners **should** be rounded unless the geometry of the icon requires otherwise.
|
||||
2. Elements at least 8 pixels wide or tall **should** use a 2 pixel corner radius for 90° corners.
|
||||
3. Elements smaller than 8 pixels **should** use a 1 pixel corner radius for 90° corners.
|
||||
4. Diagonal lines meeting at a 90° angle **should** use a radius that preserves pixel-grid alignment. This radius is typically approximately 2.41 pixels.
|
||||
5. Acute corners **should** use an appropriate amount of rounding based on their geometry.
|
||||
6. Corners where multiple lines meet **should** remain sharp when rounding would cause the icon to render inconsistently at different sizes.
|
||||
|
||||
## Spacing
|
||||
|
||||
1. Distinct elements **must** have at least 2 pixels of visual separation.
|
||||
2. Gaps between distinct elements **must not** be smaller than 2 pixels.
|
||||
3. Inner gaps **should** be at least 2 pixels wide.
|
||||
4. Spacing **should** remain visually consistent where elements connect or intersect.
|
||||
5. Elements **should not** terminate with an abrupt cut where another element visually continues or intersects them.
|
||||
|
||||
## Optical volume
|
||||
|
||||
1. Icons **should** have an optical volume comparable to the `circle` and `square` icons.
|
||||
2. Icons **should not** appear substantially larger, smaller, heavier, or lighter than comparable Lucide icons.
|
||||
|
||||
## Alignment and balance
|
||||
|
||||
1. Icons **should** be visually centered within the canvas.
|
||||
2. Asymmetrical icons **may** be positioned off their geometric center to compensate for their visual center of gravity.
|
||||
3. Symmetrical icons **should** be geometrically centered.
|
||||
|
||||
## Visual density
|
||||
|
||||
1. Icons **should** maintain a level of visual density comparable to other Lucide icons.
|
||||
2. Details **should** be simplified when they cause an icon to appear substantially denser than comparable icons.
|
||||
3. Details that are not necessary for recognition **should** be omitted.
|
||||
|
||||
## Curves
|
||||
|
||||
1. Continuous curves **should** have smooth curvature.
|
||||
2. Curves **should not** contain unintended or abrupt changes in curvature.
|
||||
3. Arcs and quadratic Bézier curves **should** be preferred where they can accurately represent the intended geometry.
|
||||
4. Cubic Bézier curves **may** be used where necessary.
|
||||
5. Control points of adjoining cubic Bézier curves **should** be aligned where required to maintain continuous curvature.
|
||||
6. Curves **should not** contain unnecessary control points.
|
||||
|
||||
## Pixel alignment
|
||||
|
||||
1. Coordinates **should** align to the pixel grid where possible.
|
||||
2. Centers of arcs and other geometric elements **should** align to the pixel grid where possible.
|
||||
3. Off-grid geometry **may** be used when required for visual balance, recognizable geometry, or smooth curvature.
|
||||
4. Pixel alignment **should not** take precedence over the visual quality of the icon.
|
||||
|
||||
## Shared geometry
|
||||
|
||||
1. Variants of an existing icon **should** preserve the geometry, placement, and orientation of the base icon.
|
||||
2. Elements that already exist in other Lucide icons **should** reuse established geometry where applicable.
|
||||
3. Related icons **should** use consistent representations of shared elements.
|
||||
4. Common modifiers and addons **should** use consistent geometry, size, and placement across related icons.
|
||||
5. Existing geometry **may** be modified when necessary to satisfy other requirements of the Lucide Design Language.
|
||||
|
||||
## Priority of requirements
|
||||
|
||||
When two non-mandatory requirements conflict, visual clarity and consistency with the Lucide Design Language should take precedence over mechanical adherence to an individual rule.
|
||||
|
||||
Requirements marked **must** or **must not** may only be deviated from where an exception is explicitly defined by the project.
|
||||
63
docs/images/0px-padding.svg
Normal file
63
docs/images/0px-padding.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_22099)">
|
||||
<g clip-path="url(#clip1_1940_22099)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M10.0499 155.017C18.91 155.039 26.4087 160.819 29.0157 168.807L119.152 209.824C119.408 209.94 119.685 210 119.964 210C120.242 210 120.516 209.94 120.771 209.825L210.779 168.876C213.353 160.892 220.813 155.088 229.66 155.018C240.706 154.93 249.73 163.814 249.817 174.859C249.865 180.871 248.163 186.768 244.919 191.832C241.69 196.872 237.069 200.869 231.615 203.341L231.616 203.342L137.314 246.245C137.305 246.249 137.297 246.253 137.288 246.257C131.846 248.723 125.939 250 119.964 250C113.989 250 108.083 248.723 102.641 246.257C102.631 246.253 102.622 246.249 102.612 246.245L8.09092 203.231C8.05009 203.213 8.00954 203.194 7.96885 203.175C2.5877 200.682 -1.96366 196.699 -5.14737 191.699C-8.33092 186.7 -10.0145 180.893 -9.99991 174.968L-9.99209 174.451C-9.69157 163.645 -0.823169 154.99 10.0499 155.017ZM229.66 100.013C240.706 99.9255 249.73 108.809 249.817 119.854C249.865 125.867 248.163 131.764 244.919 136.828C241.69 141.868 237.069 145.866 231.615 148.337L137.314 191.241C137.305 191.245 137.297 191.249 137.288 191.253C131.846 193.719 125.939 194.996 119.964 194.996C113.989 194.996 108.083 193.719 102.641 191.253C102.631 191.249 102.622 191.244 102.612 191.24L8.09092 148.228C8.05012 148.209 8.00952 148.19 7.96885 148.171C2.58785 145.678 -1.96362 141.695 -5.14737 136.695C-8.33101 131.696 -10.0146 125.888 -9.99991 119.963L-9.99209 119.447C-9.69176 108.641 -0.823289 99.9858 10.0499 100.013C18.9096 100.035 26.4075 105.815 29.0147 113.802L119.152 154.82C119.408 154.936 119.685 154.996 119.964 154.996C120.242 154.996 120.516 154.936 120.771 154.821L210.779 113.872C213.353 105.888 220.813 100.083 229.66 100.013ZM119.909 30C119.628 30 119.35 30.0604 119.093 30.1777C119.088 30.1801 119.082 30.1822 119.077 30.1846L42.7315 64.958L119.196 99.8359L119.203 99.8389C119.46 99.956 119.738 100.017 120.019 100.017C120.299 100.017 120.578 99.9561 120.835 99.8389L120.859 99.8281L197.284 65.0576L120.739 30.1846C120.735 30.1825 120.73 30.1798 120.726 30.1777C120.469 30.0605 120.19 30 119.909 30ZM250 65.0635C250 71.0715 248.255 76.9515 244.975 81.9873C241.736 86.96 237.137 90.8974 231.726 93.333L137.424 136.236L137.423 136.235C131.959 138.726 126.024 140.017 120.019 140.017C114.004 140.017 108.06 138.723 102.59 136.226V136.225L8.29502 93.2158L8.29599 93.2148C2.89195 90.7786 -1.70076 86.8444 -4.93643 81.877C-8.21653 76.8412 -9.96182 70.9613 -9.96182 64.9531C-9.96181 58.9449 -8.21656 53.065 -4.93643 48.0293L-4.62491 47.5605C-1.407 42.8111 3.06851 39.0454 8.30576 36.6865H8.30478L102.481 -6.20898V-6.20996C107.951 -8.70752 113.895 -10 119.909 -10C125.924 -9.99998 131.867 -8.70757 137.338 -6.20996L137.337 -6.20898L231.735 36.7969L231.734 36.7979C236.97 39.1566 241.446 42.9212 244.663 47.6699L244.975 48.1396L245.277 48.6133C248.362 53.5423 250 59.2429 250 65.0635Z" fill="#DD0031" fill-opacity="0.2" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path d="M10 120.013C9.99483 122.117 10.5926 124.178 11.7225 125.952C12.8524 127.727 14.467 129.14 16.3748 130.023L110.897 173.037C113.745 174.328 116.837 174.996 119.964 174.996C123.091 174.996 126.183 174.328 129.032 173.037L223.334 130.133C225.279 129.258 226.928 127.835 228.08 126.038C229.231 124.241 229.835 122.147 229.818 120.013M10 175.017C9.99483 177.121 10.5926 179.182 11.7225 180.957C12.8524 182.731 14.467 184.144 16.3748 185.028L110.897 228.041C113.745 229.332 116.837 230 119.964 230C123.091 230 126.183 229.332 129.032 228.041L223.334 185.138C225.279 184.262 226.928 182.839 228.08 181.042C229.231 179.245 229.835 177.152 229.818 175.017M129.031 11.9841C126.168 10.6766 123.057 10 119.909 10C116.761 10 113.65 10.6766 110.787 11.9841L16.5945 54.8874C14.6441 55.7482 12.9859 57.158 11.8218 58.9451C10.6577 60.7323 10.0379 62.8197 10.0379 64.9532C10.0379 67.0866 10.6577 69.1741 11.8218 70.9612C12.9859 72.7484 14.6441 74.1582 16.5945 75.019L110.896 118.032C113.76 119.34 116.871 120.016 120.019 120.016C123.167 120.016 126.278 119.34 129.141 118.032L223.443 75.129C225.394 74.2682 227.052 72.8584 228.216 71.0712C229.38 69.2841 230 67.1967 230 65.0632C230 62.9297 229.38 60.8423 228.216 59.0551C227.052 57.268 225.394 55.8582 223.443 54.9974L129.031 11.9841Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M240 0V240H0V0H240ZM10 230H230V10H10V230Z" fill="#DD0031" fill-opacity="0.5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_22099">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1940_22099">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 5.8 KiB |
69
docs/images/1px-element-spacing.svg
Normal file
69
docs/images/1px-element-spacing.svg
Normal file
@@ -0,0 +1,69 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1939_21540)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M200 80H100C88.9543 80 80 88.9543 80 100V200C80 211.046 88.9543 220 100 220H200C211.046 220 220 211.046 220 200V100C220 88.9543 211.046 80 200 80Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M160 50V40C160 29 151 20 140 20H40C29 20 20 29 20 40V140C20 151 29 160 40 160H50" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="70" y="123" width="74" height="10" transform="rotate(90 70 123)" fill="url(#paint0_linear_1939_21540)"/>
|
||||
<rect x="123" y="60" width="74" height="10" fill="url(#paint1_linear_1939_21540)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1939_21540" x1="70" y1="127.25" x2="144" y2="127.25" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F56565" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#F56565"/>
|
||||
<stop offset="1" stop-color="#F56565" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1939_21540" x1="123" y1="64.25" x2="197" y2="64.25" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F56565" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#F56565"/>
|
||||
<stop offset="1" stop-color="#F56565" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1939_21540">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
61
docs/images/1px-inner-gap.svg
Normal file
61
docs/images/1px-inner-gap.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23742)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M120 170V210M80 210H160M150 99.9999L99.9998 130V69.9999L150 99.9999ZM40 30H200C211.046 30 220 38.9543 220 50V150C220 161.046 211.046 170 200 170H40C28.9543 170 20 161.046 20 150V50C20 38.9543 28.9543 30 40 30Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="117" cy="100" r="10" fill="url(#paint0_radial_1940_23742)"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_1940_23742" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(117 100) rotate(32.9052) scale(10.1242 9.75252)">
|
||||
<stop stop-color="#DD0031" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#DD0031" stop-opacity="0.7"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_1940_23742">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
86
docs/images/1px-inner-spacing.svg
Normal file
86
docs/images/1px-inner-spacing.svg
Normal file
@@ -0,0 +1,86 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23527)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M79.9999 150V55C79.9999 46.7157 86.7157 40 94.9999 40C103.284 40 110 46.7157 110 55V105V35C110 26.7157 116.716 20 125 20C133.284 20 140 26.7157 140 35V100V55C140 46.7157 146.716 40 155 40C163.284 40 170 46.7157 170 55V110V75C170 66.7157 176.716 60 185 60C193.284 60 200 66.7157 200 75V154.75C200 190.786 170.786 220 134.75 220C112.5 220 91.1612 211.161 75.4282 195.428L37.4999 157.5C30.5964 150.596 30.5964 139.404 37.4999 132.5C44.4035 125.596 55.5964 125.596 62.4999 132.5L89.9999 160" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="47.917" y="132.154" width="74" height="15.4386" transform="rotate(45 47.917 132.154)" fill="url(#paint0_linear_1940_23527)"/>
|
||||
<rect x="190" y="66" width="74" height="10" transform="rotate(90 190 66)" fill="url(#paint1_linear_1940_23527)"/>
|
||||
<rect x="160" y="49" width="74" height="10" transform="rotate(90 160 49)" fill="url(#paint2_linear_1940_23527)"/>
|
||||
<rect x="130" y="36" width="74" height="10" transform="rotate(90 130 36)" fill="url(#paint3_linear_1940_23527)"/>
|
||||
<rect x="100" y="49" width="74" height="10" transform="rotate(90 100 49)" fill="url(#paint4_linear_1940_23527)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1940_23527" x1="47.917" y1="138.716" x2="121.917" y2="138.716" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#DD0031"/>
|
||||
<stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1940_23527" x1="190" y1="70.25" x2="264" y2="70.25" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#DD0031"/>
|
||||
<stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_1940_23527" x1="160" y1="53.25" x2="234" y2="53.25" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#DD0031"/>
|
||||
<stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_1940_23527" x1="130" y1="40.25" x2="204" y2="40.25" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#DD0031"/>
|
||||
<stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_1940_23527" x1="100" y1="53.25" x2="174" y2="53.25" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#DD0031"/>
|
||||
<stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1940_23527">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 4.3 KiB |
9
docs/images/24px-24px-violation.svg
Normal file
9
docs/images/24px-24px-violation.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="244" height="88" viewBox="0 0 244 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.8333 32H27.1667C25.6939 32 24.5 33.1939 24.5 34.6667V53.3333C24.5 54.8061 25.6939 56 27.1667 56H45.8333C47.3061 56 48.5 54.8061 48.5 53.3333V34.6667C48.5 33.1939 47.3061 32 45.8333 32Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M68.9545 34.7273L63.3295 55.625H61.054L66.679 34.7273H68.9545Z" fill="black"/>
|
||||
<path d="M96.6111 40H90.3889C89.898 40 89.5 40.398 89.5 40.8889V47.1111C89.5 47.602 89.898 48 90.3889 48H96.6111C97.102 48 97.5 47.602 97.5 47.1111V40.8889C97.5 40.398 97.102 40 96.6111 40Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M125.955 34.7273L120.33 55.625H118.054L123.679 34.7273H125.955Z" fill="black"/>
|
||||
<path d="M154.5 34H146.5C145.395 34 144.5 34.8954 144.5 36V52C144.5 53.1046 145.395 54 146.5 54H154.5C155.605 54 156.5 53.1046 156.5 52V36C156.5 34.8954 155.605 34 154.5 34Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M182.955 34.7273L177.33 55.625H175.054L180.679 34.7273H182.955Z" fill="black"/>
|
||||
<path d="M215.5 38H199.5C198.395 38 197.5 38.8954 197.5 40V48C197.5 49.1046 198.395 50 199.5 50H215.5C216.605 50 217.5 49.1046 217.5 48V40C217.5 38.8954 216.605 38 215.5 38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -1,74 +1,4 @@
|
||||
<svg width="480" height="480" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#3C3C43" d="M0 0h480v480H0z"/>
|
||||
<g clip-path="url(#a)">
|
||||
<rect x="120" y="120" width="240" height="240" rx="8" fill="#F5F5F5"/>
|
||||
<path d="M120 130h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M130 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 140h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M140 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 150h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M150 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 160h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M160 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 170h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M170 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 180h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M180 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 190h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M190 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 200h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M200 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 210h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M210 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 220h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M220 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 230h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M230 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 240h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M240 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 250h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M250 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 260h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M260 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 270h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M270 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 280h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M280 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 290h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M290 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 300h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M300 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 310h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M310 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 320h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M320 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 330h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M330 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 340h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M340 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M120 350h240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
<path d="M350 120v240" stroke="#D8D8D9" stroke-width=".5"/>
|
||||
</g>
|
||||
<g id="embed-lucide-layers" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(120 120), scale(10)">
|
||||
<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
|
||||
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
|
||||
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
|
||||
</g>
|
||||
<g opacity=".5" stroke="#fff" stroke-width="3">
|
||||
<path d="M120 92v16"/>
|
||||
<path d="M360 92v16"/>
|
||||
<path d="M120 100h240"/>
|
||||
</g>
|
||||
<g opacity=".5" stroke="#fff" stroke-width="3">
|
||||
<path d="M387.922 120h-16"/>
|
||||
<path d="M387.922 360h-16"/>
|
||||
<path d="M379.922 120v240"/>
|
||||
</g>
|
||||
<path d="M203.395 86v-3.435l8.025-7.43a30.442 30.442 0 0 0 1.718-1.784c.47-.528.825-1.046 1.068-1.552a3.851 3.851 0 0 0 .363-1.662c0-.66-.151-1.23-.451-1.707a2.964 2.964 0 0 0-1.233-1.112c-.521-.264-1.112-.396-1.773-.396-.69 0-1.291.14-1.805.419-.514.278-.91.678-1.189 1.2-.279.52-.418 1.14-.418 1.86h-4.525c0-1.475.334-2.756 1.002-3.842.668-1.086 1.603-1.927 2.807-2.521 1.204-.594 2.591-.892 4.161-.892 1.615 0 3.02.286 4.217.859 1.203.565 2.139 1.35 2.807 2.356.668 1.005 1.002 2.157 1.002 3.456 0 .852-.169 1.692-.507 2.521-.33.83-.921 1.75-1.772 2.764-.852 1.005-2.052 2.212-3.6 3.621L210 81.95v.154h9.468V86h-16.073Zm18.701-3.963v-3.754l9.412-14.828h3.237v5.196h-1.916l-5.933 9.39v.176h13.375v3.82h-18.175ZM232.917 86v-5.108l.088-1.662V63.454h4.47V86h-4.558Zm10.574 6.34V69.09h4.624v2.841h.209c.205-.455.503-.917.892-1.387.396-.477.91-.873 1.541-1.189.638-.323 1.431-.484 2.378-.484 1.232 0 2.37.323 3.412.969 1.042.638 1.875 1.603 2.499 2.895.624 1.284.936 2.895.936 4.832 0 1.887-.305 3.48-.914 4.778-.602 1.292-1.424 2.272-2.466 2.94-1.035.66-2.194.99-3.478.99-.911 0-1.685-.15-2.323-.451-.631-.301-1.149-.679-1.552-1.134a5.755 5.755 0 0 1-.925-1.398h-.143v9.049h-4.69Zm4.591-14.794c0 1.005.139 1.882.418 2.63.279.75.682 1.332 1.211 1.75.528.412 1.17.617 1.926.617.764 0 1.409-.209 1.938-.627.528-.426.928-1.013 1.2-1.761.279-.756.418-1.626.418-2.61 0-.976-.136-1.834-.407-2.576-.272-.74-.672-1.32-1.2-1.739-.529-.418-1.178-.627-1.949-.627-.763 0-1.409.202-1.937.605-.521.404-.921.976-1.2 1.717-.279.742-.418 1.615-.418 2.62Zm18.34-8.455 3.104 5.912 3.182-5.912h4.81l-4.898 8.455L277.651 86h-4.789l-3.336-5.846-3.28 5.846h-4.844l5.02-8.454-4.844-8.455h4.844Z" fill="#fff"/>
|
||||
<path d="M392.239 251.5v-3.435l8.025-7.43a30.403 30.403 0 0 0 1.718-1.784c.469-.528.825-1.046 1.067-1.552a3.839 3.839 0 0 0 .364-1.662c0-.661-.151-1.23-.452-1.707a2.96 2.96 0 0 0-1.233-1.111c-.521-.265-1.111-.397-1.772-.397-.69 0-1.292.14-1.805.419-.514.278-.91.678-1.189 1.199-.279.522-.419 1.142-.419 1.861h-4.524c0-1.475.334-2.756 1.002-3.842.667-1.086 1.603-1.927 2.807-2.521 1.203-.594 2.59-.892 4.161-.892 1.615 0 3.02.287 4.216.859 1.204.565 2.14 1.35 2.807 2.356.668 1.005 1.002 2.157 1.002 3.456 0 .852-.169 1.692-.506 2.521-.33.83-.921 1.751-1.773 2.764-.851 1.005-2.051 2.212-3.599 3.621l-3.292 3.226v.154h9.467v3.897h-16.072Zm18.701-3.963v-3.754l9.412-14.828h3.237v5.196h-1.916l-5.934 9.39v.176h13.376v3.82H410.94Zm10.821 3.963v-5.108l.088-1.662v-15.775h4.47V251.5h-4.558Zm10.574 6.341v-23.25h4.623v2.84h.21c.205-.455.502-.917.891-1.387.397-.477.91-.873 1.541-1.189.639-.323 1.432-.484 2.378-.484 1.233 0 2.371.323 3.413.968 1.042.639 1.875 1.604 2.499 2.896.624 1.284.936 2.895.936 4.832 0 1.887-.305 3.479-.914 4.778-.602 1.292-1.424 2.272-2.466 2.939-1.035.661-2.194.991-3.479.991-.91 0-1.684-.15-2.323-.451-.631-.301-1.148-.679-1.552-1.134a5.736 5.736 0 0 1-.924-1.398h-.144v9.049h-4.689Zm4.59-14.796c0 1.006.14 1.883.419 2.631.279.749.682 1.333 1.211 1.751.528.411 1.17.616 1.926.616.763 0 1.409-.209 1.938-.627.528-.426.928-1.013 1.2-1.762.278-.755.418-1.625.418-2.609 0-.976-.136-1.834-.407-2.576-.272-.741-.672-1.321-1.2-1.739-.529-.418-1.178-.627-1.949-.627-.763 0-1.409.201-1.937.605-.521.404-.921.976-1.2 1.717-.279.742-.419 1.615-.419 2.62Zm18.341-8.454 3.104 5.911 3.181-5.911h4.811l-4.899 8.454 5.031 8.455h-4.788l-3.336-5.846-3.281 5.846h-4.843l5.02-8.455-4.844-8.454h4.844Z" fill="#fff"/>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<rect x="120" y="120" width="240" height="240" rx="8" fill="#fff"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<svg width="244" height="88" viewBox="0 0 244 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M91 35H77C75.8954 35 75 35.8954 75 37V51C75 52.1046 75.8954 53 77 53H91C92.1046 53 93 52.1046 93 51V37C93 35.8954 92.1046 35 91 35Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M109.7 51V49.4091L114.622 44.3097C115.147 43.7557 115.581 43.2704 115.922 42.8537C116.267 42.4323 116.525 42.0322 116.696 41.6534C116.866 41.2746 116.951 40.8722 116.951 40.446C116.951 39.9631 116.838 39.5464 116.61 39.196C116.383 38.8409 116.073 38.5687 115.68 38.3793C115.287 38.1851 114.844 38.0881 114.352 38.0881C113.831 38.0881 113.377 38.1946 112.988 38.4077C112.6 38.6207 112.302 38.9214 112.093 39.3097C111.885 39.6979 111.781 40.1525 111.781 40.6733H109.686C109.686 39.7879 109.889 39.0137 110.297 38.3509C110.704 37.688 111.262 37.1742 111.973 36.8097C112.683 36.4403 113.49 36.2557 114.395 36.2557C115.308 36.2557 116.113 36.438 116.809 36.8026C117.51 37.1624 118.057 37.6548 118.45 38.2798C118.843 38.9001 119.039 39.6009 119.039 40.3821C119.039 40.9219 118.938 41.4498 118.734 41.9659C118.535 42.482 118.187 43.0573 117.69 43.6918C117.193 44.3215 116.502 45.0862 115.616 45.9858L112.725 49.0114V49.1179H119.274V51H109.7ZM121.348 48.1591V46.3835L127.633 36.4545H129.032V39.0682H128.145L123.649 46.1847V46.2983H132.264V48.1591H121.348ZM128.244 51V47.6193L128.258 46.8097V36.4545H130.339V51H128.244ZM143.411 48.5852L135.243 40.4176L136.586 39.0753L144.753 47.2429L143.411 48.5852ZM136.586 48.5852L135.243 47.2429L143.411 39.0753L144.753 40.4176L136.586 48.5852ZM148.059 51V49.4091L152.981 44.3097C153.507 43.7557 153.94 43.2704 154.281 42.8537C154.627 42.4323 154.885 42.0322 155.055 41.6534C155.225 41.2746 155.311 40.8722 155.311 40.446C155.311 39.9631 155.197 39.5464 154.97 39.196C154.743 38.8409 154.432 38.5687 154.039 38.3793C153.646 38.1851 153.204 38.0881 152.711 38.0881C152.19 38.0881 151.736 38.1946 151.348 38.4077C150.959 38.6207 150.661 38.9214 150.453 39.3097C150.244 39.6979 150.14 40.1525 150.14 40.6733H148.045C148.045 39.7879 148.249 39.0137 148.656 38.3509C149.063 37.688 149.622 37.1742 150.332 36.8097C151.042 36.4403 151.85 36.2557 152.754 36.2557C153.668 36.2557 154.473 36.438 155.169 36.8026C155.869 37.1624 156.416 37.6548 156.809 38.2798C157.202 38.9001 157.399 39.6009 157.399 40.3821C157.399 40.9219 157.297 41.4498 157.093 41.9659C156.895 42.482 156.547 43.0573 156.049 43.6918C155.552 44.3215 154.861 45.0862 153.975 45.9858L151.085 49.0114V49.1179H157.633V51H148.059ZM159.707 48.1591V46.3835L165.993 36.4545H167.392V39.0682H166.504L162.008 46.1847V46.2983H170.623V48.1591H159.707ZM166.603 51V47.6193L166.618 46.8097V36.4545H168.699V51H166.603Z" fill="black"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 2.7 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 4.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 4.4 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 4.0 KiB |
61
docs/images/2px-inner-gap.svg
Normal file
61
docs/images/2px-inner-gap.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23734)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M120 170V210M80 210H160M150.33 94.4C151.312 94.9683 152.127 95.7849 152.694 96.7678C153.261 97.7507 153.559 98.8654 153.559 100C153.559 101.135 153.261 102.249 152.694 103.232C152.127 104.215 151.312 105.032 150.33 105.6L109.68 129.12C108.698 129.688 107.584 129.987 106.45 129.987C105.316 129.987 104.202 129.688 103.22 129.12C102.238 128.552 101.424 127.735 100.858 126.752C100.293 125.769 99.997 124.654 100 123.52V76.48C99.998 75.3473 100.294 74.2341 100.859 73.2523C101.424 72.2705 102.237 71.4548 103.218 70.8871C104.198 70.3195 105.31 70.02 106.443 70.0187C107.576 70.0175 108.689 70.3145 109.67 70.88L150.33 94.4ZM40 30H200C211.046 30 220 38.9543 220 50V150C220 161.046 211.046 170 200 170H40C28.9543 170 20 161.046 20 150V50C20 38.9543 28.9543 30 40 30Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="120" cy="100" r="10" fill="url(#paint0_radial_1940_23734)"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_1940_23734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120 100) rotate(32.9052) scale(10.1242 9.75252)">
|
||||
<stop stop-color="#41B883" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#41B883" stop-opacity="0.7"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_1940_23734">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
86
docs/images/2px-inner-spacing.svg
Normal file
86
docs/images/2px-inner-spacing.svg
Normal file
@@ -0,0 +1,86 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23515)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M180 110V60C180 54.6957 177.893 49.6086 174.142 45.8579C170.391 42.1071 165.304 40 160 40C154.696 40 149.609 42.1071 145.858 45.8579C142.107 49.6086 140 54.6957 140 60M140 100V40C140 34.6957 137.893 29.6086 134.142 25.8579C130.391 22.1071 125.304 20 120 20C114.696 20 109.609 22.1071 105.858 25.8579C102.107 29.6086 100 34.6957 100 40V60M100 60V105M100 60C100 54.6957 97.8929 49.6086 94.1422 45.8579C90.3915 42.1071 85.3044 40 80.0001 40C74.6957 40 69.6086 42.1071 65.8579 45.8579C62.1072 49.6086 60.0001 54.6957 60.0001 60V140M180 80C180 74.6957 182.107 69.6086 185.858 65.8579C189.609 62.1071 194.696 60 200 60C205.304 60 210.391 62.1071 214.142 65.8579C217.893 69.6086 220 74.6957 220 80V140C220 161.217 211.572 181.566 196.569 196.569C181.566 211.571 161.217 220 140 220H120C92.0001 220 75.0001 211.4 60.1001 196.6L24.1001 160.6C20.6594 156.789 18.8159 151.802 18.9513 146.669C19.0867 141.537 21.1905 136.653 24.8273 133.03C28.464 129.406 33.3551 127.319 38.4878 127.202C43.6205 127.085 48.6017 128.946 52.4001 132.4L70.0001 150" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="170" y="49" width="74" height="20" transform="rotate(90 170 49)" fill="url(#paint0_linear_1940_23515)"/>
|
||||
<rect x="130" y="36" width="74" height="20" transform="rotate(90 130 36)" fill="url(#paint1_linear_1940_23515)"/>
|
||||
<rect x="90" y="60" width="74" height="20" transform="rotate(90 90 60)" fill="url(#paint2_linear_1940_23515)"/>
|
||||
<rect x="210" y="70" width="74" height="20" transform="rotate(90 210 70)" fill="url(#paint3_linear_1940_23515)"/>
|
||||
<rect x="40.1426" y="134" width="74" height="20" transform="rotate(45 40.1426 134)" fill="url(#paint4_linear_1940_23515)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1940_23515" x1="170" y1="57.5" x2="244" y2="57.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#41B883" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#41B883"/>
|
||||
<stop offset="1" stop-color="#41B883" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1940_23515" x1="130" y1="44.5" x2="204" y2="44.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#41B883" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#41B883"/>
|
||||
<stop offset="1" stop-color="#41B883" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_1940_23515" x1="90" y1="68.5" x2="164" y2="68.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#41B883" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#41B883"/>
|
||||
<stop offset="1" stop-color="#41B883" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_1940_23515" x1="210" y1="78.5" x2="284" y2="78.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#41B883" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#41B883"/>
|
||||
<stop offset="1" stop-color="#41B883" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_1940_23515" x1="40.1426" y1="142.5" x2="114.143" y2="142.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#41B883" stop-opacity="0"/>
|
||||
<stop offset="0.499255" stop-color="#41B883"/>
|
||||
<stop offset="1" stop-color="#41B883" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1940_23515">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
60
docs/images/2px-stroke-violation.svg
Normal file
60
docs/images/2px-stroke-violation.svg
Normal file
@@ -0,0 +1,60 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_22510)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M200 50H40C28.9543 50 20 58.9543 20 70V170C20 181.046 28.9543 190 40 190H200C211.046 190 220 181.046 220 170V70C220 58.9543 211.046 50 200 50Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M185 90H145M185 120H145M185 150H145" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M115 154.5V146.167C115 141.746 113.244 137.507 110.119 134.382C106.993 131.256 102.754 129.5 98.3337 129.5H71.3337C66.9134 129.5 62.6742 131.256 59.5485 134.382C56.4229 137.507 54.667 141.746 54.667 146.167V154.5M101.5 96.1667C101.5 105.371 94.0384 112.833 84.8337 112.833C75.6289 112.833 68.167 105.371 68.167 96.1667C68.167 86.9619 75.6289 79.5 84.8337 79.5C94.0384 79.5 101.5 86.9619 101.5 96.1667Z" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M185 90H145M185 120H145M185 150H145" stroke="#DD0031" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M115 154.5V146.167C115 141.746 113.244 137.507 110.119 134.382C106.993 131.256 102.754 129.5 98.3337 129.5H71.3337C66.9134 129.5 62.6742 131.256 59.5485 134.382C56.4229 137.507 54.667 141.746 54.667 146.167V154.5M101.5 96.1667C101.5 105.371 94.0384 112.833 84.8337 112.833C75.6289 112.833 68.167 105.371 68.167 96.1667C68.167 86.9619 75.6289 79.5 84.8337 79.5C94.0384 79.5 101.5 86.9619 101.5 96.1667Z" stroke="#DD0031" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_22510">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 4.1 KiB |
65
docs/images/border-radius-90deg.svg
Normal file
65
docs/images/border-radius-90deg.svg
Normal file
@@ -0,0 +1,65 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_24360)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M27.0001 103C24.7596 105.238 22.9822 107.896 21.7695 110.822C20.5568 113.747 19.9326 116.883 19.9326 120.05C19.9326 123.217 20.5568 126.353 21.7695 129.278C22.9822 132.204 24.7596 134.862 27.0001 137.1L102.9 213C105.138 215.241 107.796 217.018 110.722 218.231C113.647 219.443 116.783 220.068 119.95 220.068C123.117 220.068 126.253 219.443 129.178 218.231C132.104 217.018 134.762 215.241 137 213L212.9 137.1C215.141 134.862 216.918 132.204 218.131 129.278C219.343 126.353 219.968 123.217 219.968 120.05C219.968 116.883 219.343 113.747 218.131 110.822C216.918 107.896 215.141 105.238 212.9 103L137 27.1001C134.762 24.8595 132.104 23.0821 129.178 21.8695C126.253 20.6568 123.117 20.0326 119.95 20.0326C116.783 20.0326 113.647 20.6568 110.722 21.8695C107.796 23.0821 105.138 24.8595 102.9 27.1001L27.0001 103Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M27.0001 103C24.7596 105.238 22.9822 107.896 21.7695 110.822C20.5568 113.747 19.9326 116.883 19.9326 120.05C19.9326 123.217 20.5568 126.353 21.7695 129.278C22.9822 132.204 24.7596 134.862 27.0001 137.1L102.9 213C105.138 215.241 107.796 217.018 110.722 218.231C113.647 219.443 116.783 220.068 119.95 220.068C123.117 220.068 126.253 219.443 129.178 218.231C132.104 217.018 134.762 215.241 137 213L212.9 137.1C215.141 134.862 216.918 132.204 218.131 129.278C219.343 126.353 219.968 123.217 219.968 120.05C219.968 116.883 219.343 113.747 218.131 110.822C216.918 107.896 215.141 105.238 212.9 103L137 27.1001C134.762 24.8595 132.104 23.0821 129.178 21.8695C126.253 20.6568 123.117 20.0326 119.95 20.0326C116.783 20.0326 113.647 20.6568 110.722 21.8695C107.796 23.0821 105.138 24.8595 102.9 27.1001L27.0001 103Z" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle opacity="0.5" cx="120.1" cy="44.1" r="24.1" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="120.1" cy="196.1" r="24.1" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="44.1" cy="120.1" r="24.1" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="196.1" cy="120.1" r="24.1" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle cx="120" cy="44" r="1" fill="#41B883"/>
|
||||
<circle cx="120" cy="196" r="1" fill="#41B883"/>
|
||||
<circle cx="44" cy="120" r="1" fill="#41B883"/>
|
||||
<circle cx="196" cy="120" r="1" fill="#41B883"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_24360">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
63
docs/images/border-radius-arbitrary.svg
Normal file
63
docs/images/border-radius-arbitrary.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_24578)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M159.14 40.0001C160.271 36.7937 160.28 33.2981 159.164 30.0862C158.048 26.8744 155.875 24.1368 152.999 22.3225C150.123 20.5081 146.717 19.7245 143.337 20.1002C139.958 20.4758 136.807 21.9885 134.4 24.3901L44.3997 114.39C42.3012 116.487 40.8717 119.16 40.292 122.069C39.7124 124.979 40.0086 127.995 41.1432 130.737C42.2778 133.478 44.1999 135.821 46.6664 137.47C49.1328 139.119 52.0329 139.999 54.9997 140H95.0197C95.8185 140.001 96.6054 140.193 97.3145 140.561C98.0237 140.929 98.6344 141.461 99.0956 142.113C99.5568 142.765 99.8551 143.518 99.9654 144.309C100.076 145.101 99.9949 145.907 99.7297 146.66L80.8597 200C79.7278 203.208 79.7196 206.705 80.8365 209.917C81.9534 213.13 84.129 215.868 87.0065 217.681C89.8839 219.495 93.2924 220.277 96.6726 219.899C100.053 219.521 103.204 218.005 105.61 215.6L195.61 125.6C197.705 123.502 199.132 120.829 199.71 117.92C200.287 115.011 199.989 111.997 198.854 109.257C197.718 106.517 195.796 104.176 193.33 102.528C190.864 100.88 187.965 100.001 185 100H145.03C144.229 100.001 143.44 99.81 142.728 99.4425C142.017 99.075 141.404 98.542 140.941 97.8883C140.479 97.2346 140.18 96.4794 140.07 95.6862C139.96 94.8929 140.042 94.0849 140.31 93.3301L159.14 40.0001Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M159.14 40.0001C160.271 36.7937 160.28 33.2981 159.164 30.0862C158.048 26.8744 155.875 24.1368 152.999 22.3225C150.123 20.5081 146.717 19.7245 143.337 20.1002C139.958 20.4758 136.807 21.9885 134.4 24.3901L44.3997 114.39C42.3012 116.487 40.8717 119.16 40.292 122.069C39.7124 124.979 40.0086 127.995 41.1432 130.737C42.2778 133.478 44.1999 135.821 46.6664 137.47C49.1328 139.119 52.0329 139.999 54.9997 140H95.0197C95.8185 140.001 96.6054 140.193 97.3145 140.561C98.0237 140.929 98.6344 141.461 99.0956 142.113C99.5568 142.765 99.8551 143.518 99.9654 144.309C100.076 145.101 99.9949 145.907 99.7297 146.66L80.8597 200C79.7278 203.208 79.7196 206.705 80.8365 209.917C81.9534 213.13 84.129 215.868 87.0065 217.681C89.8839 219.495 93.2924 220.277 96.6726 219.899C100.053 219.521 103.204 218.005 105.61 215.6L195.61 125.6C197.705 123.502 199.132 120.829 199.71 117.92C200.287 115.011 199.989 111.997 198.854 109.257C197.718 106.517 195.796 104.176 193.33 102.528C190.864 100.88 187.965 100.001 185 100H145.03C144.229 100.001 143.44 99.81 142.728 99.4425C142.017 99.075 141.404 98.542 140.941 97.8883C140.479 97.2346 140.18 96.4794 140.07 95.6862C139.96 94.8929 140.042 94.0849 140.31 93.3301L159.14 40.0001Z" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle opacity="0.5" cx="145" cy="35" r="15" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="95" cy="205" r="15" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="55" cy="125" r="15" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="185" cy="115" r="15" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="145" cy="95" r="5" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="95" cy="145" r="5" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_24578">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
73
docs/images/border-radius-correct.svg
Normal file
73
docs/images/border-radius-correct.svg
Normal file
@@ -0,0 +1,73 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_24902)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 160H120.1M160 160H160.1M80 160H80.1M30 190C30 195.304 32.1071 200.391 35.8579 204.142C39.6086 207.893 44.6957 210 50 210H190C195.304 210 200.391 207.893 204.142 204.142C207.893 200.391 210 195.304 210 190V85C210.001 84.103 209.761 83.2223 209.304 82.4501C208.848 81.678 208.192 81.0429 207.405 80.6114C206.619 80.1798 205.731 79.9678 204.835 79.9975C203.938 80.0271 203.066 80.2974 202.31 80.78L157.69 109.22C156.934 109.703 156.062 109.973 155.165 110.003C154.269 110.032 153.381 109.82 152.595 109.389C151.808 108.957 151.152 108.322 150.696 107.55C150.239 106.778 149.999 105.897 150 105V85C150.001 84.103 149.761 83.2223 149.304 82.4501C148.848 81.678 148.192 81.0429 147.405 80.6114C146.619 80.1798 145.731 79.9678 144.835 79.9975C143.938 80.0271 143.066 80.2974 142.31 80.78L97.7 109.22C96.9437 109.705 96.0707 109.978 95.1727 110.009C94.2747 110.04 93.3849 109.828 92.597 109.396C91.809 108.965 91.152 108.328 90.695 107.555C90.238 106.781 89.9979 105.899 90 105V50C90 44.6957 87.8929 39.6086 84.1421 35.8579C80.3914 32.1071 75.3043 30 70 30H50C44.6957 30 39.6086 32.1071 35.8579 35.8579C32.1071 39.6086 30 44.6957 30 50V190Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M120 160H120.1M160 160H160.1M80 160H80.1M30 190C30 195.304 32.1071 200.391 35.8579 204.142C39.6086 207.893 44.6957 210 50 210H190C195.304 210 200.391 207.893 204.142 204.142C207.893 200.391 210 195.304 210 190V85C210.001 84.103 209.761 83.2223 209.304 82.4501C208.848 81.678 208.192 81.0429 207.405 80.6114C206.619 80.1798 205.731 79.9678 204.835 79.9975C203.938 80.0271 203.066 80.2974 202.31 80.78L157.69 109.22C156.934 109.703 156.062 109.973 155.165 110.003C154.269 110.032 153.381 109.82 152.595 109.389C151.808 108.957 151.152 108.322 150.696 107.55C150.239 106.778 149.999 105.897 150 105V85C150.001 84.103 149.761 83.2223 149.304 82.4501C148.848 81.678 148.192 81.0429 147.405 80.6114C146.619 80.1798 145.731 79.9678 144.835 79.9975C143.938 80.0271 143.066 80.2974 142.31 80.78L97.7 109.22C96.9437 109.705 96.0707 109.978 95.1727 110.009C94.2747 110.04 93.3849 109.828 92.597 109.396C91.809 108.965 91.152 108.328 90.695 107.555C90.238 106.781 89.9979 105.899 90 105V50C90 44.6957 87.8929 39.6086 84.1421 35.8579C80.3914 32.1071 75.3043 30 70 30H50C44.6957 30 39.6086 32.1071 35.8579 35.8579C32.1071 39.6086 30 44.6957 30 50V190Z" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<circle opacity="0.5" cx="50" cy="50" r="20" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle cx="50" cy="50" r="1" fill="#41B883"/>
|
||||
<circle opacity="0.5" cx="70" cy="50" r="20" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle cx="70" cy="50" r="1" fill="#41B883"/>
|
||||
<circle opacity="0.5" cx="50" cy="190" r="20" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle cx="50" cy="190" r="1" fill="#41B883"/>
|
||||
<circle opacity="0.5" cx="190" cy="190" r="20" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle cx="190" cy="190" r="1" fill="#41B883"/>
|
||||
<circle cx="205" cy="85" r="1" fill="#41B883"/>
|
||||
<circle cx="145" cy="85" r="1" fill="#41B883"/>
|
||||
<circle cx="95" cy="105" r="1" fill="#41B883"/>
|
||||
<circle cx="155" cy="105" r="1" fill="#41B883"/>
|
||||
<circle opacity="0.5" cx="205" cy="85" r="5" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="145" cy="85" r="5" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="95" cy="105" r="5" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="155" cy="105" r="5" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_24902">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
65
docs/images/border-radius-line-join-violation.svg
Normal file
65
docs/images/border-radius-line-join-violation.svg
Normal file
@@ -0,0 +1,65 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_24730)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<g clip-path="url(#clip1_1940_24730)">
|
||||
<path d="M160 80.0001L20 220M174.88 150H90M140.86 184.12C139.003 185.983 136.796 187.462 134.366 188.471C131.936 189.48 129.331 190 126.7 190H50V113.28C50.0011 107.976 52.109 102.89 55.86 99.1401L117.5 37.5001C128.758 26.2417 144.028 19.9167 159.95 19.9167C175.872 19.9167 191.142 26.2417 202.4 37.5001C213.658 48.7586 219.983 64.0283 219.983 79.9501C219.983 95.872 213.658 111.142 202.4 122.4L140.86 184.12Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M160 80.0001L20 220M174.88 150H90M140.86 184.12C139.003 185.983 136.796 187.462 134.366 188.471C131.936 189.48 129.331 190 126.7 190L70 190C58.9543 190 50 181.046 50 170V113.28C50.0011 107.976 52.109 102.89 55.86 99.1401L117.5 37.5001C128.758 26.2417 144.028 19.9167 159.95 19.9167C175.872 19.9167 191.142 26.2417 202.4 37.5001C213.658 48.7586 219.983 64.0283 219.983 79.9501C219.983 95.872 213.658 111.142 202.4 122.4L140.86 184.12Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</g>
|
||||
<path opacity="0.5" d="M70 190C58.9543 190 50 181.046 50 170" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="50" cy="190" r="30" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="70" cy="170" r="20" fill="#DD0031"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_24730">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1940_24730">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
63
docs/images/border-radius-line-join.svg
Normal file
63
docs/images/border-radius-line-join.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_24655)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<g clip-path="url(#clip1_1940_24655)">
|
||||
<path d="M160 80.0001L20 220M174.88 150H90M140.86 184.12C139.003 185.983 136.796 187.462 134.366 188.471C131.936 189.48 129.331 190 126.7 190H50V113.28C50.0011 107.976 52.109 102.89 55.86 99.1401L117.5 37.5001C128.758 26.2417 144.028 19.9167 159.95 19.9167C175.872 19.9167 191.142 26.2417 202.4 37.5001C213.658 48.7586 219.983 64.0283 219.983 79.9501C219.983 95.872 213.658 111.142 202.4 122.4L140.86 184.12Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M160 80.0001L20 220M174.88 150H90M140.86 184.12C139.003 185.983 136.796 187.462 134.366 188.471C131.936 189.48 129.331 190 126.7 190H50V113.28C50.0011 107.976 52.109 102.89 55.86 99.1401L117.5 37.5001C128.758 26.2417 144.028 19.9167 159.95 19.9167C175.872 19.9167 191.142 26.2417 202.4 37.5001C213.658 48.7586 219.983 64.0283 219.983 79.9501C219.983 95.872 213.658 111.142 202.4 122.4L140.86 184.12Z" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle opacity="0.5" cx="50" cy="190" r="30" stroke="#41B883" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_24655">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1940_24655">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
61
docs/images/border-radius-violation.svg
Normal file
61
docs/images/border-radius-violation.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_24990)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 160H120.1M160 160H160.1M31 30H90V110L150 80V110L210 80V210H30V30M80 160H80.1" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M120 160H120.1M160 160H160.1M31 30H90V110L150 80V110L210 80V210H30V30M80 160H80.1" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<path opacity="0.5" d="M30 50C41.0457 50 50 41.0457 50 30" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M90 50C78.9543 50 70 41.0457 70 30" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M30 190C41.0457 190 50 198.954 50 210" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M210 190C198.954 190 190 198.954 190 210" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_24990">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
70
docs/images/centered-strokes-violation.svg
Normal file
70
docs/images/centered-strokes-violation.svg
Normal file
@@ -0,0 +1,70 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23370)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M30 30H210C215.523 30 220 34.4772 220 40V160C220 165.523 215.523 170 210 170H30C24.4772 170 20 165.523 20 160V40C20 34.4772 24.4772 30 30 30Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M30 30H210C215.523 30 220 34.4772 220 40V160C220 165.523 215.523 170 210 170H30C24.4772 170 20 165.523 20 160V40C20 34.4772 24.4772 30 30 30Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M80 210H160" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M120 170V210" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="120" cy="100" r="30" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M80 210H160" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M120 180V210" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M240 20H0" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M240 180H0" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M9.99998 240L10 0" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M230 240L230 0" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M120 240V180" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path opacity="0.5" d="M240 210L0 210" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<path d="M210 20H30C18.9543 20 10 28.9543 10 40V160C10 171.046 18.9543 180 30 180H210C221.046 180 230 171.046 230 160V40C230 28.9543 221.046 20 210 20Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M140 100C140 111.046 131.046 120 120 120C108.954 120 100 111.046 100 100C100 88.9543 108.954 80 120 80C131.046 80 140 88.9543 140 100Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1940_23370">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 4.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 4.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 4.1 KiB |
21
docs/images/density-optimal.svg
Normal file
21
docs/images/density-optimal.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg width="196" height="88" viewBox="0 0 196 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M48 34V38M40 34V38M35 42H53M40 46H40.01M44 46H44.01M48 46H48.01M40 50H40.01M44 50H44.01M48 50H48.01M37 36H51C52.1046 36 53 36.8954 53 38V52C53 53.1046 52.1046 54 51 54H37C35.8954 54 35 53.1046 35 52V38C35 36.8954 35.8954 36 37 36Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M83 53V48C83 47.7348 82.8946 47.4804 82.7071 47.2929C82.5196 47.1054 82.2652 47 82 47H78C77.7348 47 77.4804 47.1054 77.2929 47.2929C77.1054 47.4804 77 47.7348 77 48V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.774 42.31C85.5655 42.1104 85.288 41.999 84.9995 41.999C84.7109 41.999 84.4334 42.1104 84.225 42.31C83.76 42.7535 83.142 43.001 82.4995 43.001C81.8569 43.001 81.2389 42.7535 80.774 42.31C80.5655 42.1107 80.2883 41.9995 80 41.9995C79.7116 41.9995 79.4344 42.1107 79.226 42.31C78.7609 42.7538 78.1428 43.0014 77.5 43.0014C76.8571 43.0014 76.239 42.7538 75.774 42.31C75.5655 42.1104 75.288 41.999 74.9995 41.999C74.7109 41.999 74.4334 42.1104 74.225 42.31C73.7758 42.7386 73.1832 42.9848 72.5626 43.0005C71.9419 43.0163 71.3376 42.8006 70.8673 42.3954C70.3969 41.9901 70.0941 41.4244 70.0179 40.8082C69.9417 40.1921 70.0975 39.5696 70.455 39.062L73.344 34.878C73.5273 34.6075 73.774 34.3861 74.0627 34.233C74.3514 34.0799 74.6732 33.9999 75 34H85C85.3257 33.9999 85.6466 34.0793 85.9347 34.2315C86.2228 34.3836 86.4694 34.6039 86.653 34.873L89.548 39.065C89.9055 39.573 90.0611 40.196 89.9844 40.8124C89.9077 41.4289 89.6042 41.9947 89.1331 42.3997C88.662 42.8046 88.057 43.0197 87.436 43.0029C86.815 42.9861 86.2225 42.7388 85.774 42.309" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M72 42.95V51C72 51.5304 72.2107 52.0391 72.5858 52.4142C72.9609 52.7892 73.4696 53 74 53H86C86.5304 53 87.0391 52.7892 87.4142 52.4142C87.7893 52.0391 88 51.5304 88 51V42.95" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M114.5 34C112.5 40.584 112.5 47.416 114.5 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M117.5 34C119.5 40.584 119.5 47.416 117.5 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M108.402 48H123.598" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M108.402 40H123.598" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M112 34C111.637 34 111.281 34.099 110.969 34.2862C110.658 34.4735 110.404 34.7421 110.233 35.063C108.766 37.8135 107.999 40.8828 107.998 44C107.997 47.1173 108.764 50.1868 110.229 52.938C110.4 53.259 110.654 53.5274 110.966 53.7145C111.277 53.9016 111.634 54.0003 111.997 54H120.003C120.367 54.0002 120.724 53.9014 121.035 53.7141C121.347 53.5268 121.601 53.2581 121.771 52.937C123.238 50.1864 124.005 47.1172 124.005 44.0002C124.005 40.8831 123.238 37.8138 121.772 35.063C121.601 34.7406 121.345 34.471 121.032 34.2837C120.719 34.0963 120.36 33.9982 119.995 34H112Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 54C157.523 54 162 49.5228 162 44C162 38.4772 157.523 34 152 34C146.477 34 142 38.4772 142 44C142 49.5228 146.477 54 152 54Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 46.5C153.381 46.5 154.5 45.3807 154.5 44C154.5 42.6193 153.381 41.5 152 41.5C150.619 41.5 149.5 42.6193 149.5 44C149.5 45.3807 150.619 46.5 152 46.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 34V41.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M159 37L153.77 42.23" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M162 44H154.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M159 51L153.77 45.77" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 46.5V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M150.23 45.77L145 51" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M149.5 44H142" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M150.23 42.23L145 37" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
29
docs/images/density-too-dense.svg
Normal file
29
docs/images/density-too-dense.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<svg width="196" height="88" viewBox="0 0 196 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49 34V38M39 34V38M35 42H53M38 42V54M53 46L35 46M53 50L35 50M42 42V54M46 42V54M50 42V54M36 36H52C53.1046 36 54 36.8954 54 38V52C54 53.1046 53.1046 54 52 54H36C34.8954 54 34 53.1046 34 52V38C34 36.8954 34.8954 36 36 36Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M80 53V48C80 47.7348 79.8946 47.4804 79.7071 47.2929C79.5196 47.1054 79.2652 47 79 47H77C76.7348 47 76.4804 47.1054 76.2929 47.2929C76.1054 47.4804 76 47.7348 76 48V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M84.9995 41.999C85.448 42.4288 86.815 42.9861 87.436 43.0029C88.057 43.0197 88.662 42.8046 89.1331 42.3997C89.6042 41.9947 89.9077 41.4289 89.9844 40.8124C90.0611 40.196 89.9055 39.573 89.548 39.065L86.653 34.873C86.4694 34.6039 86.2228 34.3836 85.9347 34.2315C85.6466 34.0793 85.3257 33.9999 85 34L83.5 34M84.9995 41.999L83.5 34M84.9995 41.999C84.5 42.5 83.5282 43.001 82.4995 43.001C81.471 43.001 80.5 42.5 80 41.9995M80 41.9995V34M80 41.9995C79.5 42.5 78.5288 43.0014 77.5 43.0014C76.4708 43.0014 75.5 42.5 74.9995 41.999M74.9995 41.999L76.5 34M74.9995 41.999C74.5 42.5 73.5533 42.9754 72.5626 43.0005C71.9419 43.0163 71.3376 42.8006 70.8673 42.3954C70.3969 41.9901 70.0941 41.4244 70.0179 40.8082C69.9417 40.1921 70.0975 39.5696 70.455 39.062L73.344 34.878C73.5273 34.6075 73.774 34.3861 74.0627 34.233C74.3514 34.0799 74.6732 33.9999 75 34L76.5 34M76.5 34H80M80 34H83.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M72 42.95V51C72 51.5304 72.2107 52.0391 72.5858 52.4142C72.9609 52.7892 73.4696 53 74 53H86C86.5304 53 87.0391 52.7892 87.4142 52.4142C87.7893 52.0391 88 51.5304 88 51V42.95" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M84 47L84 47.01M84 50L84 50.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M114.5 34C112.5 40.584 112.5 47.416 114.5 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M117.5 34C119.5 40.584 119.5 47.416 117.5 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M109.027 50H122.936M109.027 38H122.936M108.402 42H123.598M108.402 46H123.598" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M112 34C111.637 34 111.281 34.099 110.969 34.2862C110.658 34.4735 110.404 34.7421 110.233 35.063C108.766 37.8135 107.999 40.8828 107.998 44C107.997 47.1173 108.764 50.1868 110.229 52.938C110.4 53.259 110.654 53.5274 110.966 53.7145C111.277 53.9016 111.634 54.0003 111.997 54H120.003C120.367 54.0002 120.724 53.9014 121.035 53.7141C121.347 53.5268 121.601 53.2581 121.771 52.937C123.238 50.1864 124.005 47.1172 124.005 44.0002C124.005 40.8831 123.238 37.8138 121.772 35.063C121.601 34.7406 121.345 34.471 121.032 34.2837C120.719 34.0963 120.36 33.9982 119.995 34H112Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g clip-path="url(#clip0_1937_21192)">
|
||||
<path d="M152 54C157.523 54 162 49.5228 162 44C162 38.4772 157.523 34 152 34C146.477 34 142 38.4772 142 44C142 49.5228 146.477 54 152 54Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 46.5C153.381 46.5 154.5 45.3807 154.5 44C154.5 42.6193 153.381 41.5 152 41.5C150.619 41.5 149.5 42.6193 149.5 44C149.5 45.3807 150.619 46.5 152 46.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 34V41.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M159 37L153.77 42.23" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M162 44H154.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M159 51L153.77 45.77" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M152 46.5V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M150.23 45.77L145 51" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M149.5 44H142" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M150.23 42.23L145 37" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M155.827 34.7613L152.957 41.6904M161.145 40.2115L154.312 43.042M161.239 47.8269L154.31 44.9568M155.788 53.1459L152.957 46.3125M151.043 46.3098L148.173 53.2389M149.687 44.958L142.854 47.7885M149.69 43.0434L142.761 40.1732M151.042 41.6875L148.211 34.8541" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1937_21192">
|
||||
<rect width="24" height="24" fill="white" transform="translate(140 32)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
14
docs/images/established-shapes-base-do.svg
Normal file
14
docs/images/established-shapes-base-do.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/>
|
||||
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M103.523 42.4957V40.2543H114.441V42.4957H103.523ZM103.523 47.7458V45.5043H114.441V47.7458H103.523Z" fill="#F56565"/>
|
||||
<path d="M122.439 41.8V36C122.439 35.4696 122.65 34.9609 123.025 34.5858C123.4 34.2107 123.909 34 124.439 34H132.439C132.756 33.9992 133.07 34.0612 133.363 34.1824C133.656 34.3036 133.922 34.4815 134.145 34.706L137.733 38.294C137.958 38.5177 138.136 38.7836 138.257 39.0764C138.378 39.3692 138.44 39.6831 138.439 40V52C138.439 52.5304 138.229 53.0391 137.854 53.4142C137.479 53.7893 136.97 54 136.439 54H133.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M132.439 34V39C132.439 39.2652 132.545 39.5196 132.732 39.7071C132.92 39.8946 133.174 40 133.439 40H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M127.439 49V47C127.439 46.4696 127.229 45.9609 126.854 45.5858C126.479 45.2107 125.97 45 125.439 45C124.909 45 124.4 45.2107 124.025 45.5858C123.65 45.9609 123.439 46.4696 123.439 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M128.439 49H122.439C121.887 49 121.439 49.4477 121.439 50V53C121.439 53.5523 121.887 54 122.439 54H128.439C128.992 54 129.439 53.5523 129.439 53V50C129.439 49.4477 128.992 49 128.439 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
14
docs/images/established-shapes-base-dont.svg
Normal file
14
docs/images/established-shapes-base-dont.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/>
|
||||
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M111.64 40.2539H114.441V42.4951H110.754L109.564 45.5039H114.441V47.7451H108.679L107.657 50.3281H105.33L106.352 47.7451H103.523V45.5039H107.237L108.427 42.4951H103.523V40.2539H109.312L110.333 37.6719H112.66L111.64 40.2539Z" fill="#F56565"/>
|
||||
<path d="M136.441 41V36C136.441 35.4696 136.231 34.9609 135.856 34.5858C135.481 34.2107 134.972 34 134.441 34H126.441L120.441 40V52C120.441 52.5304 120.652 53.0391 121.027 53.4142C121.402 53.7893 121.911 54 122.441 54H128.441" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M127.441 34V39C127.441 40.1046 126.546 41 125.441 41H120.441" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M134.441 49V47C134.441 46.4696 134.652 45.9609 135.027 45.5858C135.402 45.2107 135.911 45 136.441 45C136.972 45 137.481 45.2107 137.856 45.5858C138.231 45.9609 138.441 46.4696 138.441 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M133.441 49H139.441C139.994 49 140.441 49.4477 140.441 50V53C140.441 53.5523 139.994 54 139.441 54H133.441C132.889 54 132.441 53.5523 132.441 53V50C132.441 49.4477 132.889 49 133.441 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
14
docs/images/established-shapes-consistency-do.svg
Normal file
14
docs/images/established-shapes-consistency-do.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M43 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" 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="M47 49L52 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M52 49L47 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/>
|
||||
<path d="M80.5234 44H94.5234" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M87.5234 37V51" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M103.523 42.4957V40.2543H114.441V42.4957H103.523ZM103.523 47.7458V45.5043H114.441V47.7458H103.523Z" fill="#F56565"/>
|
||||
<path d="M129.789 54H124.439C123.909 54 123.4 53.7893 123.025 53.4142C122.65 53.0391 122.439 52.5304 122.439 52V36C122.439 35.4696 122.65 34.9609 123.025 34.5858C123.4 34.2107 123.909 34 124.439 34H132.439C132.756 33.9992 133.07 34.0612 133.363 34.1824C133.656 34.3036 133.922 34.4815 134.145 34.706L137.733 38.294C137.958 38.5177 138.136 38.7836 138.257 39.0764C138.378 39.3692 138.44 39.6831 138.439 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M132.439 34V39C132.439 39.2652 132.545 39.5196 132.732 39.7071C132.92 39.8946 133.174 40 133.439 40H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M132.439 51H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M135.439 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
12
docs/images/established-shapes-consistency-dont.svg
Normal file
12
docs/images/established-shapes-consistency-dont.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M43 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" 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="M47 49L52 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M52 49L47 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/>
|
||||
<path d="M80.5234 44H94.5234" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M87.5234 37V51" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M111.64 40.2539H114.441V42.4951H110.754L109.564 45.5039H114.441V47.7451H108.679L107.657 50.3281H105.33L106.352 47.7451H103.523V45.5039H107.237L108.427 42.4951H103.523V40.2539H109.312L110.333 37.6719H112.66L111.64 40.2539Z" fill="#F56565"/>
|
||||
<path d="M130.441 54H136.441C136.972 54 137.481 53.7893 137.856 53.4142C138.231 53.0391 138.441 52.5304 138.441 52V45.35V40C138.442 39.6831 138.38 39.3692 138.259 39.0764C138.138 38.7836 137.96 38.5177 137.735 38.294L134.147 34.706C133.924 34.4815 133.658 34.3036 133.365 34.1824C133.072 34.0612 132.758 33.9992 132.441 34H124.441C123.911 34 123.402 34.2107 123.027 34.5858C122.652 34.9609 122.441 35.4696 122.441 36V46M122.441 50H126.441M126.441 50H130.441M126.441 50V46M126.441 50V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M132.441 34V39C132.441 39.2652 132.547 39.5196 132.734 39.7071C132.922 39.8946 133.176 40 133.441 40H138.441" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
14
docs/images/established-shapes-sub-do.svg
Normal file
14
docs/images/established-shapes-sub-do.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/>
|
||||
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M103.523 42.4957V40.2543H114.441V42.4957H103.523ZM103.523 47.7458V45.5043H114.441V47.7458H103.523Z" fill="#F56565"/>
|
||||
<path d="M122.439 41.8V36C122.439 35.4696 122.65 34.9609 123.025 34.5858C123.4 34.2107 123.909 34 124.439 34H132.439C132.756 33.9992 133.07 34.0612 133.363 34.1824C133.656 34.3036 133.922 34.4815 134.145 34.706L137.733 38.294C137.958 38.5177 138.136 38.7836 138.257 39.0764C138.378 39.3692 138.44 39.6831 138.439 40V52C138.439 52.5304 138.229 53.0391 137.854 53.4142C137.479 53.7893 136.97 54 136.439 54H133.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M132.439 34V39C132.439 39.2652 132.545 39.5196 132.732 39.7071C132.92 39.8946 133.174 40 133.439 40H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M127.439 49V47C127.439 46.4696 127.229 45.9609 126.854 45.5858C126.479 45.2107 125.97 45 125.439 45C124.909 45 124.4 45.2107 124.025 45.5858C123.65 45.9609 123.439 46.4696 123.439 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M128.439 49H122.439C121.887 49 121.439 49.4477 121.439 50V53C121.439 53.5523 121.887 54 122.439 54H128.439C128.992 54 129.439 53.5523 129.439 53V50C129.439 49.4477 128.992 49 128.439 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
11
docs/images/established-shapes-sub-dont.svg
Normal file
11
docs/images/established-shapes-sub-dont.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/>
|
||||
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M111.64 40.2539H114.441V42.4951H110.754L109.564 45.5039H114.441V47.7451H108.679L107.657 50.3281H105.33L106.352 47.7451H103.523V45.5039H107.237L108.427 42.4951H103.523V40.2539H109.312L110.333 37.6719H112.66L111.64 40.2539Z" fill="#F56565"/>
|
||||
<path d="M122.441 37.8V36C122.441 35.4696 122.652 34.9609 123.027 34.5858C123.402 34.2107 123.911 34 124.441 34H132.441M132.441 34C132.758 33.9992 133.072 34.0612 133.365 34.1824C133.658 34.3036 133.924 34.4815 134.147 34.706L137.735 38.294C137.96 38.5177 138.138 38.7836 138.259 39.0764C138.38 39.3692 138.442 39.6831 138.441 40M132.441 34V39C132.441 39.2652 132.547 39.5196 132.734 39.7071C132.922 39.8946 133.176 40 133.441 40H138.441M138.441 40V52C138.441 52.5304 138.231 53.0391 137.856 53.4142C137.481 53.7893 136.972 54 136.441 54H133.441M128.441 46V44C128.441 42.3432 127.098 41 125.441 41C123.785 41 122.441 42.3432 122.441 44V46M128.441 46H122.441M128.441 46C129.546 46 130.441 46.8954 130.441 48V52C130.441 53.1046 129.546 54 128.441 54H122.441C121.337 54 120.441 53.1046 120.441 52V48C120.441 46.8954 121.337 46 122.441 46M125.441 50V50.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 6.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 5.5 KiB |
70
docs/images/round-caps-violation.svg
Normal file
70
docs/images/round-caps-violation.svg
Normal file
@@ -0,0 +1,70 @@
|
||||
<svg width="241" height="240" viewBox="0 0 241 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23313)">
|
||||
<path d="M0.5 10H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 20H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 30H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 40H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 50H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 60H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 70H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 80H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 90H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 100H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 110H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 120H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 130H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 140H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 150H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 160H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 170H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 180H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 190H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 200H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 210H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 220H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0.5 230H240.5" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230.5 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M20.5 120H45.4C49.7532 119.988 53.9835 118.555 57.4486 115.92C60.9138 113.285 63.4246 109.592 64.6 105.4L88.1 21.8C88.2515 21.2807 88.5673 20.8246 89 20.5C89.4327 20.1754 89.9591 20 90.5 20C91.0409 20 91.5673 20.1754 92 20.5C92.4327 20.8246 92.7485 21.2807 92.9 21.8L120.5 120" stroke="black" stroke-width="20" stroke-linecap="square" stroke-linejoin="round"/>
|
||||
<path d="M220.5 120H195.7C191.33 119.991 187.077 121.413 183.591 124.05C180.106 126.686 177.58 130.392 176.4 134.6L152.9 218.2C152.749 218.719 152.433 219.175 152 219.5C151.567 219.825 151.041 220 150.5 220C149.959 220 149.433 219.825 149 219.5C148.567 219.175 148.251 218.719 148.1 218.2L120.5 120" stroke="black" stroke-width="20" stroke-linejoin="round"/>
|
||||
<path d="M220.5 120H180.5M60.5 120H20.5" stroke="url(#paint0_linear_1940_23313)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M10.5 110H30.5V130H10.5V110Z" fill="#DD0031"/>
|
||||
<path opacity="0.5" d="M210.5 110H220.5V130H210.5V110Z" fill="#DD0031"/>
|
||||
<circle opacity="0.5" cx="220.5" cy="120" r="20" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="20.5" cy="120" r="20" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<circle cx="220.5" cy="120" r="2" fill="#DD0031"/>
|
||||
<circle cx="20.5" cy="120" r="2" fill="#DD0031"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1940_23313" x1="20.5" y1="99.5008" x2="220.5" y2="99.501" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031"/>
|
||||
<stop offset="0.20238" stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.801339" stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#DD0031"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1940_23313">
|
||||
<rect width="240" height="240" fill="white" transform="translate(0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 4.6 KiB |
73
docs/images/round-joints-violation.svg
Normal file
73
docs/images/round-joints-violation.svg
Normal file
@@ -0,0 +1,73 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1940_23256)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M20 120H44.9C49.2532 119.988 53.4835 118.555 56.9486 115.92C60.4138 113.285 62.9246 109.592 64.1 105.4L90 40L120 120" stroke="black" stroke-width="20" stroke-linecap="round"/>
|
||||
<path d="M220 120H195.2C190.83 119.991 186.577 121.413 183.091 124.05C179.606 126.686 177.08 130.392 175.9 134.6L150 200L120 120" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
<path d="M105 75L90 40L75 75M135 165L150 200L165 165" stroke="url(#paint0_linear_1940_23256)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g opacity="0.5">
|
||||
<path d="M100 40C100 45.5228 95.5228 50 90 50C84.4772 50 80 45.5228 80 40C80 38.4354 80.3593 36.9546 81 35.6359C82.6207 32.2997 86.0418 30 90 30C94.102 30 97.6271 32.4698 99.1694 36.0034C99.2925 36.2854 99.4029 36.5741 99.5 36.8688C99.8245 37.8538 100 38.9064 100 40Z" fill="#DD0031"/>
|
||||
<path d="M81 35.6359C82.6207 32.2997 86.0418 30 90 30C94.102 30 97.6271 32.4698 99.1694 36.0034L90 12L81 35.6359Z" fill="#DD0031"/>
|
||||
</g>
|
||||
<circle opacity="0.5" cx="90" cy="40" r="20" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<circle opacity="0.5" cx="150" cy="200" r="20" stroke="#DD0031" stroke-dasharray="1 1"/>
|
||||
<circle cx="90" cy="40" r="2" fill="#DD0031"/>
|
||||
<circle cx="150" cy="200" r="2" fill="#DD0031"/>
|
||||
<path opacity="0.5" d="M140 200C140 194.477 144.477 190 150 190C155.523 190 160 194.477 160 200C160 201.296 159.753 202.535 159.304 203.672L140.641 203.5L140.5 203.131C140.176 202.146 140 201.094 140 200Z" fill="#DD0031"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1940_23256" x1="120" y1="40" x2="120" y2="220" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DD0031"/>
|
||||
<stop offset="0.244047" stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="0.759672" stop-color="#DD0031" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#DD0031"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1940_23256">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 4.0 KiB |
20
docs/images/visual-weight-consistent.svg
Normal file
20
docs/images/visual-weight-consistent.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="196" height="88" fill="none" viewBox="0 0 196 88">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M51 35H37a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V37a2 2 0 0 0-2-2"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 47 6 6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 41 6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M89 48v5h-5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M89 40v-5h-5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M71 48v5h5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m71 53 6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M71 40v-5h5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m77 41-6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M116 54c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m155 47 6 6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m155 41 6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M161 48v5h-5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M161 40v-5h-5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M143 48v5h5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m143 53 6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M143 40v-5h5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m149 41-6-6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
20
docs/images/visual-weight-uneven.svg
Normal file
20
docs/images/visual-weight-uneven.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="196" height="88" fill="none" viewBox="0 0 196 88">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M51 35H37a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V37a2 2 0 0 0-2-2"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 47 7 7"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 41 7-7"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M90 48v6h-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M90 40v-6h-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M70 48v6h6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m70 54 7-7"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M70 40v-6h6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m77 41-7-7"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M116 54c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m154 46 6 6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m154 42 6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M160 47v5h-5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M160 41v-5h-5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M144 47v5h5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m144 52 6-6"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M144 41v-5h5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m150 42-6-6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 22 KiB |
57
docs/images/visually-centered-do.svg
Normal file
57
docs/images/visually-centered-do.svg
Normal file
@@ -0,0 +1,57 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1936_19361)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M40.37 46.88C39.9753 45.9691 39.8636 44.9607 40.0494 43.9855C40.2351 43.0104 40.7098 42.1137 41.4117 41.4117C42.1137 40.7098 43.0104 40.2351 43.9855 40.0494C44.9607 39.8636 45.9691 39.9753 46.88 40.37L206.88 105.37C207.853 105.766 208.676 106.459 209.233 107.35C209.79 108.241 210.052 109.284 209.982 110.332C209.913 111.381 209.515 112.38 208.845 113.189C208.175 113.998 207.267 114.576 206.25 114.84L145.01 130.64C141.55 131.53 138.391 133.33 135.862 135.853C133.333 138.377 131.527 141.532 130.63 144.99L114.84 206.25C114.576 207.267 113.998 208.175 113.189 208.845C112.38 209.515 111.381 209.913 110.332 209.982C109.284 210.052 108.241 209.79 107.35 209.233C106.459 208.676 105.766 207.853 105.37 206.88L40.37 46.88Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M120 0V240M240 120H0" stroke="#F56565" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1936_19361">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
57
docs/images/visually-centered-dont.svg
Normal file
57
docs/images/visually-centered-dont.svg
Normal file
@@ -0,0 +1,57 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1936_19418)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M20.37 26.88C19.9753 25.9691 19.8636 24.9607 20.0494 23.9855C20.2351 23.0104 20.7098 22.1137 21.4117 21.4117C22.1137 20.7098 23.0104 20.2351 23.9855 20.0494C24.9607 19.8636 25.9691 19.9753 26.88 20.37L186.88 85.37C187.853 85.7663 188.676 86.4591 189.233 87.3498C189.79 88.2406 190.052 89.2841 189.982 90.3323C189.913 91.3805 189.515 92.3801 188.845 93.1893C188.175 93.9984 187.267 94.576 186.25 94.84L125.01 110.64C121.55 111.53 118.391 113.33 115.862 115.853C113.333 118.377 111.527 121.532 110.63 124.99L94.84 186.25C94.576 187.267 93.9984 188.175 93.1893 188.845C92.3801 189.515 91.3805 189.913 90.3323 189.982C89.2841 190.052 88.2406 189.79 87.3498 189.233C86.4591 188.676 85.7663 187.853 85.37 186.88L20.37 26.88Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M120 0V240M240 120H0" stroke="#F56565" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1936_19418">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
58
docs/images/visually-centered-symmetrical-do.svg
Normal file
58
docs/images/visually-centered-symmetrical-do.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1936_19498)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M180 60L60 180" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M60 60L180 180" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M120 0V240M240 120H0" stroke="#F56565" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1936_19498">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
57
docs/images/visually-centered-symmetrical-dont.svg
Normal file
57
docs/images/visually-centered-symmetrical-dont.svg
Normal file
@@ -0,0 +1,57 @@
|
||||
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1936_19604)">
|
||||
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path d="M210 90L90 210M90 90L210 210" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path opacity="0.5" d="M120 0V240M240 120H0" stroke="#F56565" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1936_19604">
|
||||
<rect width="240" height="240" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 18 KiB |
@@ -37,6 +37,7 @@
|
||||
"lint:json:icons": "ajv --spec=draft2020 -s icon.schema.json -d 'icons/*.json' > /dev/null",
|
||||
"lint:json:categories": "ajv --spec=draft2020 -s category.schema.json -d 'categories/*.json' > /dev/null",
|
||||
"lint:json": "pnpm run lint:json:icons && pnpm run lint:json:categories",
|
||||
"lint:icons:all": "pnpm run lint:icons && pnpm run lint:json:icons",
|
||||
"lint": "pnpm lint:es && pnpm lint:format && pnpm lint:json && pnpm lint:icons",
|
||||
"format": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --write",
|
||||
"prepare": "husky install",
|
||||
|
||||
Reference in New Issue
Block a user