mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-06 14:50:21 -05:00
feat: stop offering icons in the style library
This commit is contained in:
Juanfran
parent
866c0bbeb2
commit
5a219e99d8
24 changed files with 28 additions and 408 deletions
|
|
@ -459,56 +459,6 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section aria-label="icons">
|
||||
<h2 class="title-large title-margin">Icons</h2>
|
||||
<div class="icons-section" style="margin-block-end: var(--spacing-20)">
|
||||
<span class="icon icon-chevron-bottom"></span>
|
||||
<span class="icon icon-chevron-top"></span>
|
||||
<span class="icon icon-chevron-right"></span>
|
||||
<span class="icon icon-chevron-left"></span>
|
||||
<span class="icon icon-arrow-right"></span>
|
||||
<span class="icon icon-close"></span>
|
||||
<span class="icon icon-close-l"></span>
|
||||
<span class="icon icon-delete"></span>
|
||||
<span class="icon icon-add"></span>
|
||||
<span class="icon icon-remove"></span>
|
||||
<span class="icon icon-search"></span>
|
||||
<span class="icon icon-copy"></span>
|
||||
<span class="icon icon-more"></span>
|
||||
<span class="icon icon-loading"></span>
|
||||
<span class="icon icon-help"></span>
|
||||
<span class="icon icon-info"></span>
|
||||
<span class="icon icon-show"></span>
|
||||
<span class="icon icon-hide"></span>
|
||||
<span class="icon icon-lock"></span>
|
||||
<span class="icon icon-unlock"></span>
|
||||
<span class="icon icon-download"></span>
|
||||
</div>
|
||||
<template lang="html">
|
||||
<span class="icon icon-chevron-bottom"></span>
|
||||
<span class="icon icon-chevron-top"></span>
|
||||
<span class="icon icon-chevron-right"></span>
|
||||
<span class="icon icon-chevron-left"></span>
|
||||
<span class="icon icon-arrow-right"></span>
|
||||
<span class="icon icon-close"></span>
|
||||
<span class="icon icon-close-l"></span>
|
||||
<span class="icon icon-delete"></span>
|
||||
<span class="icon icon-add"></span>
|
||||
<span class="icon icon-remove"></span>
|
||||
<span class="icon icon-search"></span>
|
||||
<span class="icon icon-copy"></span>
|
||||
<span class="icon icon-more"></span>
|
||||
<span class="icon icon-loading"></span>
|
||||
<span class="icon icon-help"></span>
|
||||
<span class="icon icon-info"></span>
|
||||
<span class="icon icon-show"></span>
|
||||
<span class="icon icon-hide"></span>
|
||||
<span class="icon icon-lock"></span>
|
||||
<span class="icon icon-unlock"></span>
|
||||
<span class="icon icon-download"></span>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section aria-label="select">
|
||||
<h2 class="title-large title-margin">Select</h2>
|
||||
<div class="component-section select-section">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,21 @@
|
|||
<ng-template #iconArrowRight>
|
||||
<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="icon"
|
||||
>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</ng-template>
|
||||
|
||||
<div>
|
||||
<div role="tablist" class="nav-tabs">
|
||||
<button
|
||||
|
|
@ -53,7 +71,7 @@
|
|||
<ul class="preview-list">
|
||||
<li class="preview-item" *ngFor="let preview of previewList()">
|
||||
<span class="original" [title]="preview.name">{{ preview.name }}</span>
|
||||
<span class="icon icon-arrow-right"></span>
|
||||
<ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
|
||||
<span class="result" [title]="resultAddText(preview)">{{
|
||||
resultAddText(preview)
|
||||
}}</span>
|
||||
|
|
@ -112,7 +130,7 @@
|
|||
[innerHTML]="highlightMatch(preview.name)"
|
||||
[title]="preview.name"
|
||||
></span>
|
||||
<span class="icon icon-arrow-right"></span>
|
||||
<ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
|
||||
<span class="result" [title]="resultReplaceText(preview.name)">{{
|
||||
resultReplaceText(preview.name)
|
||||
}}</span>
|
||||
|
|
|
|||
|
|
@ -21,3 +21,9 @@ Import the CSS file into your project:
|
|||
For detailed examples and to see how to use the styles and components, visit the documentation at:
|
||||
|
||||
[Penpot Plugin Styles Documentation](https://penpot.github.io/penpot-plugins/)
|
||||
|
||||
#### Icons
|
||||
|
||||
We recommend using Feather icons for Penpot plugins to ensure consistency with Penpot's design.
|
||||
|
||||
You can find Feather icons at: [Feather Icons](https://feathericons.com/)
|
||||
|
|
|
|||
|
|
@ -3,93 +3,9 @@
|
|||
align-items: center;
|
||||
block-size: var(--spacing-16);
|
||||
cursor: default;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--font-size-medium);
|
||||
font-family: var(--font-size-m);
|
||||
font-size: var(--font-size-m);
|
||||
inline-size: var(--spacing-16);
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.icon-chevron-bottom {
|
||||
background-image: url('../icons/chevron-bottom.svg');
|
||||
}
|
||||
|
||||
.icon-chevron-left {
|
||||
background-image: url('../icons/chevron-left.svg');
|
||||
}
|
||||
|
||||
.icon-chevron-right {
|
||||
background-image: url('../icons/chevron-right.svg');
|
||||
}
|
||||
|
||||
.icon-chevron-top {
|
||||
background-image: url('../icons/chevron-top.svg');
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
background-image: url('../icons/arrow-right.svg');
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
background-image: url('../icons/actions-close.svg');
|
||||
}
|
||||
|
||||
.icon-close-l {
|
||||
background-image: url('../icons/actions-close-l.svg');
|
||||
}
|
||||
|
||||
.icon-delete {
|
||||
background-image: url('../icons/actions-delete.svg');
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-image: url('../icons/actions-add.svg');
|
||||
}
|
||||
|
||||
.icon-remove {
|
||||
background-image: url('../icons/actions-remove.svg');
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
background-image: url('../icons/actions-search.svg');
|
||||
}
|
||||
|
||||
.icon-copy {
|
||||
background-image: url('../icons/actions-copy.svg');
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
background-image: url('../icons/actions-more.svg');
|
||||
}
|
||||
|
||||
.icon-loading {
|
||||
background-image: url('../icons/actions-loading.svg');
|
||||
}
|
||||
|
||||
.icon-help {
|
||||
background-image: url('../icons/actions-help.svg');
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
background-image: url('../icons/actions-info.svg');
|
||||
}
|
||||
|
||||
.icon-show {
|
||||
background-image: url('../icons/actions-show.svg');
|
||||
}
|
||||
|
||||
.icon-hide {
|
||||
background-image: url('../icons/actions-hide.svg');
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
background-image: url('../icons/actions-lock.svg');
|
||||
}
|
||||
|
||||
.icon-unlock {
|
||||
background-image: url('../icons/actions-unlock.svg');
|
||||
}
|
||||
|
||||
.icon-download {
|
||||
background-image: url('../icons/app-download.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M8 3.333v9.334M3.333 8h9.334"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 248 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 303 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M10.397 5.601 8 8.002l-2.397 2.401m-.006-4.8L8 8.002l2.403 2.399"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 313 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M6 8a2 2 0 0 1 2-2h4.667c1.103 0 2 .896 2 2v4.667c0 1.103-.897 2-2 2H8c-1.104 0-2-.897-2-2V8Zm-2.667 2h-.666a1.333 1.333 0 0 1-1.334-1.333v-6c0-.737.597-1.334 1.334-1.334h6c.736 0 1.333.597 1.333 1.334v.666"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 455 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M2 4h12m-1.333 0v9.333c0 .737-.597 1.334-1.334 1.334H4.667a1.334 1.334 0 0 1-1.334-1.334V4m2 0V2.667c0-.737.597-1.334 1.334-1.334h2.666c.737 0 1.334.597 1.334 1.334V4m-4 3.333v4m2.666-4v4"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 436 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M6.06 5.918a2 2 0 0 1 3.887.667c0 1.333-2 2-2 2M8 11.252h0Zm6.666-3.334a6.668 6.668 0 1 1-13.332.162 6.668 6.668 0 0 1 13.332-.162Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 380 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M15.184 5.843c-1.465 2.85-4.213 4.8-7.36 4.8-3.129 0-5.863-1.927-7.334-4.85"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 324 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M8 7v4m0-6h0Zm6.666 2.918a6.668 6.668 0 1 1-13.332.162 6.668 6.668 0 0 1 13.332-.162Zh0Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 337 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M14.111 3.556v3.333h-3.334m-8.888 5.555V9.111h3.334m-1.94-2.778a4.999 4.999 0 0 1 8.25-1.866l2.578 2.422M1.889 9.111l2.578 2.422a4.998 4.998 0 0 0 8.25-1.866M1.889 9.111h0Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 421 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M12.148 8.667H3.852c-.655 0-1.185.597-1.185 1.333v3.333c0 .737.53 1.334 1.185 1.334h8.296c.655 0 1.185-.597 1.185-1.334V10c0-.736-.53-1.333-1.185-1.333Zm-7.481 0v-4a3.334 3.334 0 0 1 6.666 0v4"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 441 B |
|
|
@ -1,32 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M8 7.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
<path
|
||||
d="M8 2.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
<path
|
||||
d="M8 12.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 723 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M3 7.997h10"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 260 B |
|
|
@ -1,16 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M7.333 12.667a5.32 5.32 0 0 0 3.772-1.562 5.334 5.334 0 1 0-3.772 1.562ZM14 14l-2.895-2.895"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M7.333 12.667a5.32 5.32 0 0 0 3.772-1.562 5.334 5.334 0 1 0-3.772 1.562ZM14 14l-2.895-2.895"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 454 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M15.5 7.843C14.004 4.949 11.2 3 7.987 3 4.793 3 2.002 4.926.5 7.793c1.502 2.923 4.293 4.85 7.487 4.85 3.212 0 6.017-1.95 7.513-4.8ZM8 7.018a.803.803 0 0 1 .696 1.206.803.803 0 0 1-1.5-.402c0-.444.36-.804.804-.804Z"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 462 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M12.148 8.667H3.852c-.655 0-1.185.597-1.185 1.333v3.333c0 .737.53 1.334 1.185 1.334h8.296c.655 0 1.185-.597 1.185-1.334V10c0-.736-.53-1.333-1.185-1.333Zm-7.481 0v-4a3.334 3.334 0 0 1 6.6-.667"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 440 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M14 10v2.667A1.335 1.335 0 0 1 12.667 14H3.333A1.335 1.335 0 0 1 2 12.667V10m2.667-3.333L8 10m0 0 3.333-3.333M8 10V2"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 365 B |
|
|
@ -1,22 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
|
||||
<path
|
||||
d="M3.125 7.5h8.75"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
"
|
||||
class="stroke-shape"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 3.125 11.875 7.5 7.5 11.875"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
"
|
||||
class="stroke-shape"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 457 B |
|
|
@ -1,11 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M10 12 6 8l4-4"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 234 B |
|
|
@ -1,11 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="m6 12 4-4-4-4"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 233 B |
|
|
@ -1,11 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="m4 10 4-4 4 4"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgb(143, 157, 163);
|
||||
stroke-opacity: 1;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 233 B |
Loading…
Reference in a new issue