mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-17 23:27:42 +01:00
Compare commits
2 Commits
fix/fixed-
...
feat/figma
| Author | SHA1 | Date | |
|---|---|---|---|
|
6c98d8015f | ||
|
|
78054456a4 |
@@ -1,18 +1,20 @@
|
||||
.icon-button {
|
||||
padding: 8px;
|
||||
color: var(--color-black);
|
||||
color: var(--figma-color-text);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: var(--figma-color-bg-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 2px var(--color-blue);
|
||||
box-shadow: inset 0 0 0 2px var(--figma-color-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,20 +4,20 @@
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid var(--color-border, #e5e5e5);
|
||||
border-bottom: 1px solid var(--figma-color-border);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-tertiary, #b3b3b3);
|
||||
color: var(--figma-color-text-tertiary);
|
||||
padding: 0 8px;
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: var(--color-text, #333333);
|
||||
color: var(--figma-color-text);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
fill: var(--figma-color-text);
|
||||
opacity: .5;
|
||||
}
|
||||
input {
|
||||
background: var(--figma-color-bg);
|
||||
color: var(--figma-color-text);
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px 0 36px;
|
||||
|
||||
@@ -5,14 +5,9 @@
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
--block: rgba(0, 0, 0, 0.06);
|
||||
--loader: hsl(0 0% 89%);
|
||||
|
||||
background:
|
||||
linear-gradient(-75deg, transparent 40%, var(--loader), transparent 60%) 0 0 / 200% 100%,
|
||||
var(--block);
|
||||
|
||||
border-radius: calc(var(--padding) * 0.5);
|
||||
linear-gradient(-75deg, transparent 40%, var(--figma-color-bg-tertiary), transparent 60%) 0 0 / 200% 100%,
|
||||
var(--figma-color-bg-secondary);
|
||||
animation: load 2s infinite linear;
|
||||
background-attachment: fixed;
|
||||
width: 40px;
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.8744 19.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072zm1.1256-4.5815c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5z" fill="#000" fill-rule="evenodd"/></svg>
|
||||
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.8744 19.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072zm1.1256-4.5815c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 408 B After Width: | Height: | Size: 417 B |
@@ -1 +1 @@
|
||||
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.3972 18.6046c-.7793.625-1.7687.9988-2.8455.9988-2.5138 0-4.5517-2.0378-4.5517-4.5517 0-2.5138 2.0379-4.5517 4.5517-4.5517 2.5139 0 4.5517 2.0379 4.5517 4.5517 0 1.0769-.3739 2.0664-.999 2.8458l3.2491 3.2492-.7071.7071zm.7062-3.5529c0 1.9616-1.5901 3.5517-3.5517 3.5517-1.9615 0-3.5517-1.5901-3.5517-3.5517 0-1.9615 1.5902-3.5517 3.5517-3.5517 1.9616 0 3.5517 1.5902 3.5517 3.5517z" fill="#000" fill-rule="evenodd"/></svg>
|
||||
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.3972 18.6046c-.7793.625-1.7687.9988-2.8455.9988-2.5138 0-4.5517-2.0378-4.5517-4.5517 0-2.5138 2.0379-4.5517 4.5517-4.5517 2.5139 0 4.5517 2.0379 4.5517 4.5517 0 1.0769-.3739 2.0664-.999 2.8458l3.2491 3.2492-.7071.7071zm.7062-3.5529c0 1.9616-1.5901 3.5517-3.5517 3.5517-1.9615 0-3.5517-1.5901-3.5517-3.5517 0-1.9615 1.5902-3.5517 3.5517-3.5517 1.9616 0 3.5517 1.5902 3.5517 3.5517z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 558 B |
@@ -18,11 +18,6 @@
|
||||
url('https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9') format('woff');
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-blue: #18a0fb;
|
||||
--color-black: #333;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 11px;
|
||||
@@ -32,10 +27,14 @@ body {
|
||||
.search-input {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid var(--figma-color-border);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border-bottom: 1px solid var(--figma-color-border);
|
||||
}
|
||||
|
||||
main {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
@@ -44,13 +43,17 @@ main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: var(--figma-color-text-tertiary);
|
||||
background: var(--figma-color-bg);
|
||||
border-top: 1px solid var(--figma-color-border);
|
||||
|
||||
.footer-link {
|
||||
color: inherit;
|
||||
@@ -74,15 +77,16 @@ footer {
|
||||
}
|
||||
|
||||
.lucide-logo {
|
||||
color: var(--figma-color-text);
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: var(--figma-color-text-secondary);
|
||||
}
|
||||
|
||||
.link-list {
|
||||
@@ -92,7 +96,7 @@ footer {
|
||||
}
|
||||
|
||||
.info-link {
|
||||
color: var(--color-blue);
|
||||
color: var(--figma-color-text-brand);
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -144,6 +144,6 @@ figma.on('run', (event) => {
|
||||
cachedIcons,
|
||||
});
|
||||
} else {
|
||||
figma.showUI(__uiFiles__.interface, { width: 300, height: 400 });
|
||||
figma.showUI(__uiFiles__.interface, { width: 300, height: 400, themeColors: true });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -44,11 +44,32 @@ const Info = ({ version }: PageProps) => {
|
||||
|
||||
return (
|
||||
<div className="info-page">
|
||||
<img
|
||||
src="https://lucide.dev/logo-text.svg"
|
||||
alt="Lucide Logo"
|
||||
<svg
|
||||
className="lucide-logo"
|
||||
/>
|
||||
width="160"
|
||||
viewBox="0 0 82 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9"
|
||||
stroke="#F56565"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p className="version">v{version}</p>
|
||||
<section className="link-list">
|
||||
{menuItems.map(({ name, url }) => (
|
||||
|
||||
Reference in New Issue
Block a user