Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3fef7aca71 | ||
|
|
45aaec4b72 | ||
|
|
f8932f8eb8 | ||
|
|
1a3f0a85a1 | ||
|
|
adc62f5963 | ||
|
|
b3058bb8cf | ||
|
|
53fab88ff9 | ||
|
|
1a49fd88d8 | ||
|
|
b826f0c527 | ||
|
|
558bdd83b5 | ||
|
|
a805955781 | ||
|
|
ee8e10d746 | ||
|
|
2c2ee80687 | ||
|
|
1c93e0a476 | ||
|
|
91a1359b5e | ||
|
|
90e8041a35 | ||
|
|
3898742b6a | ||
|
|
a4a0e20ff5 |
@@ -26,6 +26,7 @@ futbol
|
||||
gddr
|
||||
glassmorphism
|
||||
gltf
|
||||
halloumi
|
||||
interpoint
|
||||
interpunct
|
||||
middot
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import { onMounted, ref, shallowRef, type DefineComponent } from 'vue';
|
||||
import { data } from './HomeHeroIconsCard.data';
|
||||
import { useRouter } from 'vitepress';
|
||||
import { motion, useScroll, useTransform, type Options as MotionOptions } from 'motion-v';
|
||||
import { useMediaQuery } from '@vueuse/core';
|
||||
import LucideIcon from '../base/LucideIcon.vue';
|
||||
|
||||
// motion-v re-exports framer-motion's `Variants`, which doesn't match the `variants` prop of its components
|
||||
@@ -10,7 +11,8 @@ type Variants = MotionOptions['variants'];
|
||||
|
||||
const emit = defineEmits(['animation-complete']);
|
||||
|
||||
const MotionLucideIcon = motion.create(LucideIcon);
|
||||
// motion.create only accepts a props-less DefineComponent, so the SFC's typed props need widening
|
||||
const MotionLucideIcon = motion.create(LucideIcon as unknown as DefineComponent);
|
||||
|
||||
const preventFocusProps = {
|
||||
tabindex: '-1',
|
||||
@@ -21,6 +23,89 @@ const COLUMNS = 8;
|
||||
const SIZE = 2;
|
||||
const GAP = 1;
|
||||
|
||||
/** The two spirals of the Lucide logo, drawn the way the SVG editor previews them. */
|
||||
const LOGO_PATH_OUTER =
|
||||
'M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557';
|
||||
|
||||
const LOGO_PATH_INNER =
|
||||
'M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21';
|
||||
|
||||
const VERTICES =
|
||||
'M14 12h.01M10 8h.01M6 12h.01M14 20h.01M22 12h.01M18 3.05557h.01M10 12h.01M14 16h.01M18 12h.01M10 4h.01M2 12h.01M6.06253 21h.01';
|
||||
|
||||
const MARKERS = [
|
||||
[14, 12],
|
||||
[18, 3.05557],
|
||||
[10, 12],
|
||||
[6.06253, 21],
|
||||
];
|
||||
|
||||
/** Bezier handles as [x1, y1, x2, y2] segments, grouped by when they appear. */
|
||||
const HANDLE_GROUPS = [
|
||||
// Outer spiral
|
||||
{ delay: 0.2, segments: [[14, 12, 14, 9.79086]] },
|
||||
{
|
||||
delay: 0.4,
|
||||
segments: [
|
||||
[10, 8, 12.2091, 8],
|
||||
[10, 8, 7.79086, 8],
|
||||
],
|
||||
},
|
||||
{
|
||||
delay: 0.6,
|
||||
segments: [
|
||||
[6, 12, 6, 9.79086],
|
||||
[6, 12, 6, 16.4183],
|
||||
],
|
||||
},
|
||||
{
|
||||
delay: 0.8,
|
||||
segments: [
|
||||
[14, 20, 9.58172, 20],
|
||||
[14, 20, 18.4183, 20],
|
||||
],
|
||||
},
|
||||
{
|
||||
delay: 1,
|
||||
segments: [
|
||||
[22, 12, 22, 16.4183],
|
||||
[22, 12, 22, 8.446],
|
||||
],
|
||||
},
|
||||
{ delay: 1.2, segments: [[18, 3.05557, 20.455, 5.25285]] },
|
||||
// Inner spiral
|
||||
{ delay: 0.2, segments: [[10, 12, 10, 14.2091]] },
|
||||
{
|
||||
delay: 0.4,
|
||||
segments: [
|
||||
[14, 16, 11.7909, 16],
|
||||
[14, 16, 16.2091, 16],
|
||||
],
|
||||
},
|
||||
{
|
||||
delay: 0.6,
|
||||
segments: [
|
||||
[18, 12, 18, 14.2091],
|
||||
[18, 12, 18, 7.58172],
|
||||
],
|
||||
},
|
||||
{
|
||||
delay: 0.8,
|
||||
segments: [
|
||||
[10, 4, 14.4183, 4],
|
||||
[10, 4, 5.58172, 4],
|
||||
],
|
||||
},
|
||||
{
|
||||
delay: 1,
|
||||
segments: [
|
||||
[2, 12, 2, 7.58172],
|
||||
[2, 12, 2, 15.5841],
|
||||
],
|
||||
},
|
||||
{ delay: 1.2, segments: [[6.06253, 21, 3.57127, 18.8012]] },
|
||||
];
|
||||
|
||||
const { scrollYProgress } = useScroll();
|
||||
const opacity = useTransform(() => 1 - scrollYProgress.get() * 8);
|
||||
|
||||
@@ -101,6 +186,9 @@ const draw: Variants = {
|
||||
|
||||
// motion-v passes the variant label that finished, not the resolved variant
|
||||
const onAnimationComplete = (variant: unknown) => {
|
||||
// Reduced motion stops at the icon grid, so don't shrink the icons or loop
|
||||
if (reducedMotion.value) return;
|
||||
|
||||
if (variant === 'visible') {
|
||||
drawAnimation.value = 'exit';
|
||||
return;
|
||||
@@ -155,6 +243,24 @@ const shrinkIconVariants: Variants = {
|
||||
transition: { delay: 1.8, duration: 1.5, ease: 'easeInOut' },
|
||||
}),
|
||||
};
|
||||
|
||||
// Only rendered on the client, so reduced motion is known before the first frame
|
||||
const mounted = ref(false);
|
||||
const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
|
||||
|
||||
onMounted(() => {
|
||||
if (reducedMotion.value) {
|
||||
drawAnimation.value = 'exit';
|
||||
showHandles.value = false;
|
||||
scaleDownAnimation.value = 'small';
|
||||
iconGridAnimation.value = 'showIcons';
|
||||
}
|
||||
|
||||
mounted.value = true;
|
||||
});
|
||||
|
||||
/** Skips straight to the end state when the user prefers reduced motion. */
|
||||
const initial = <T,>(value: T) => (reducedMotion.value ? false : value);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -167,6 +273,7 @@ const shrinkIconVariants: Variants = {
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<motion.svg
|
||||
v-if="mounted"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-12 -12 48 48"
|
||||
fill="none"
|
||||
@@ -209,7 +316,7 @@ const shrinkIconVariants: Variants = {
|
||||
<MotionLucideIcon
|
||||
v-for="(icon, index) in icons"
|
||||
size="2"
|
||||
initial="initial"
|
||||
:initial="initial('initial')"
|
||||
:key="icon.name"
|
||||
:variants="iconAnimationVariants"
|
||||
:animate="iconGridAnimation"
|
||||
@@ -223,15 +330,15 @@ const shrinkIconVariants: Variants = {
|
||||
<motion.g
|
||||
:variants="scaleDownVariants"
|
||||
:animate="scaleDownAnimation"
|
||||
initial="hidden"
|
||||
:initial="initial('hidden')"
|
||||
@animation-complete="onAnimationComplete"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<motion.path
|
||||
d="M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557"
|
||||
:style="{ stroke: 'var(--vp-c-gray-1)' }"
|
||||
:d="LOGO_PATH_OUTER"
|
||||
:style="{ stroke: reducedMotion ? 'var(--vp-c-text-1)' : 'var(--vp-c-gray-1)' }"
|
||||
:animate="drawAnimation"
|
||||
initial="hidden"
|
||||
:initial="initial('hidden')"
|
||||
:variants="draw"
|
||||
:custom="1"
|
||||
@animation-complete="onAnimationComplete"
|
||||
@@ -239,10 +346,10 @@ const shrinkIconVariants: Variants = {
|
||||
/>
|
||||
|
||||
<motion.path
|
||||
d="M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21"
|
||||
:style="{ stroke: 'var(--vp-c-gray-1)' }"
|
||||
:d="LOGO_PATH_INNER"
|
||||
:style="{ stroke: reducedMotion ? 'var(--vp-c-brand)' : 'var(--vp-c-gray-1)' }"
|
||||
:animate="drawAnimation"
|
||||
initial="hidden"
|
||||
:initial="initial('hidden')"
|
||||
:variants="draw"
|
||||
:custom="0"
|
||||
v-bind="preventFocusProps"
|
||||
@@ -253,80 +360,36 @@ const shrinkIconVariants: Variants = {
|
||||
class="svg-preview-control-path-marker-group"
|
||||
:style="{ stroke: 'var(--vp-c-text-1)' }"
|
||||
stroke-width="0.125"
|
||||
:initial="{ opacity: 1 }"
|
||||
:animate="showHandles ? { opacity: 1 } : { opacity: 0 }"
|
||||
:transition="{ delay: 0, duration: 0.2 }"
|
||||
:initial="initial({ opacity: 1 })"
|
||||
:animate="{ opacity: showHandles ? 1 : 0 }"
|
||||
:transition="{ duration: 0.2 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<motion.path
|
||||
d="M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557"
|
||||
:initial="{ opacity: 0 }"
|
||||
v-for="d in [LOGO_PATH_OUTER, LOGO_PATH_INNER]"
|
||||
:key="d"
|
||||
:d="d"
|
||||
:initial="initial({ opacity: 0 })"
|
||||
:animate="{ opacity: 1 }"
|
||||
:transition="{ delay: 1.6, duration: 1.5 }"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
<motion.path
|
||||
d="M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21"
|
||||
:initial="{ opacity: 0 }"
|
||||
:animate="{ opacity: 1 }"
|
||||
:transition="{ delay: 1.6, duration: 1.5 }"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
<motion.g
|
||||
:initial="{ opacity: 0 }"
|
||||
:d="VERTICES"
|
||||
:initial="initial({ opacity: 0 })"
|
||||
:animate="{ opacity: 1 }"
|
||||
:transition="{ delay: 0.2, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path
|
||||
d="M14 12h.01M10 8h.01M10 8h.01M6 12h.01M6 12h.01M14 20h.01M14 20h.01M22 12h.01M22 12h.01M18 3.05557h.01M10 12h.01M14 16h.01M14 16h.01M18 12h.01M18 12h.01M10 4h.01M10 4h.01M2 12h.01M2 12h.01M6.06253 21h.01"
|
||||
>
|
||||
</path>
|
||||
</motion.g>
|
||||
|
||||
<motion.circle
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0, duration: 0.8 }"
|
||||
cx="14"
|
||||
cy="12"
|
||||
r="0.5"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
<motion.circle
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0, duration: 0.8 }"
|
||||
cx="14"
|
||||
cy="12"
|
||||
v-for="[cx, cy] in MARKERS"
|
||||
:key="`${cx},${cy}`"
|
||||
:cx="cx"
|
||||
:cy="cy"
|
||||
r="0.5"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
<motion.circle
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:initial="initial({ opacity: 0, scale: 0.2 })"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0, duration: 0.8 }"
|
||||
cx="18"
|
||||
cy="3.05557"
|
||||
r="0.5"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
<motion.circle
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0, duration: 0.8 }"
|
||||
cx="10"
|
||||
cy="12"
|
||||
r="0.5"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
<motion.circle
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0, duration: 0.8 }"
|
||||
cx="6.06253"
|
||||
cy="21"
|
||||
r="0.5"
|
||||
:transition="{ duration: 0.8 }"
|
||||
v-bind="preventFocusProps"
|
||||
/>
|
||||
</motion.g>
|
||||
@@ -335,221 +398,30 @@ const shrinkIconVariants: Variants = {
|
||||
stroke-width="0.12"
|
||||
stroke="#FFF"
|
||||
stroke-opacity="0.3"
|
||||
:initial="{ opacity: 1 }"
|
||||
:animate="showHandles ? { opacity: 1 } : { opacity: 0 }"
|
||||
:transition="{ delay: 0, duration: 0.6 }"
|
||||
:initial="initial({ opacity: 1 })"
|
||||
:animate="{ opacity: showHandles ? 1 : 0 }"
|
||||
:transition="{ duration: 0.6 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
v-for="(group, index) in HANDLE_GROUPS"
|
||||
:key="index"
|
||||
:initial="initial({ opacity: 0, scale: 0.2 })"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.2, duration: 0.3 }"
|
||||
:transition="{ delay: group.delay, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M14 12 14 9.79086"></path>
|
||||
<circle
|
||||
cy="9.79086"
|
||||
cx="14"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.4, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M10 8 12.2091 8"></path>
|
||||
<circle
|
||||
cy="8"
|
||||
cx="12.2091"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M10 8 7.79086 8"></path>
|
||||
<circle
|
||||
cy="8"
|
||||
cx="7.79086"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.6, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M6 12 6 9.79086"></path>
|
||||
<circle
|
||||
cy="9.79086"
|
||||
cx="6"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M6 12 6 16.4183"></path>
|
||||
<circle
|
||||
cy="16.4183"
|
||||
cx="6"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.8, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M14 20 9.58172 20"></path>
|
||||
<circle
|
||||
cy="20"
|
||||
cx="9.58172"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M14 20 18.4183 20"></path>
|
||||
<circle
|
||||
cy="20"
|
||||
cx="18.4183"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 1, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M22 12 22 16.4183"></path>
|
||||
<circle
|
||||
cy="16.4183"
|
||||
cx="22"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M22 12 22 8.446"></path>
|
||||
<circle
|
||||
cy="8.446"
|
||||
cx="22"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 1.2, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M18 3.05557 20.455 5.25285"></path>
|
||||
<circle
|
||||
cy="5.25285"
|
||||
cx="20.455"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.2, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M10 12 10 14.2091"></path>
|
||||
<circle
|
||||
cy="14.2091"
|
||||
cx="10"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.4, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M14 16 11.7909 16"></path>
|
||||
<circle
|
||||
cy="16"
|
||||
cx="11.7909"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M14 16 16.2091 16"></path>
|
||||
<circle
|
||||
cy="16"
|
||||
cx="16.2091"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.6, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M18 12 18 14.2091"></path>
|
||||
<circle
|
||||
cy="14.2091"
|
||||
cx="18"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M18 12 18 7.58172"></path>
|
||||
<circle
|
||||
cy="7.58172"
|
||||
cx="18"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 0.8, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M10 4 14.4183 4"></path>
|
||||
<circle
|
||||
cy="4"
|
||||
cx="14.4183"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M10 4 5.58172 4"></path>
|
||||
<circle
|
||||
cy="4"
|
||||
cx="5.58172"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 1, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M2 12 2 7.58172"></path>
|
||||
<circle
|
||||
cy="7.58172"
|
||||
cx="2"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<path d="M2 12 2 15.5841"></path>
|
||||
<circle
|
||||
cy="15.5841"
|
||||
cx="2"
|
||||
r="0.25"
|
||||
></circle>
|
||||
</motion.g>
|
||||
<motion.g
|
||||
:initial="{ opacity: 0, scale: 0.2 }"
|
||||
:animate="{ opacity: 1, scale: 1 }"
|
||||
:transition="{ delay: 1.2, duration: 0.3 }"
|
||||
v-bind="preventFocusProps"
|
||||
>
|
||||
<path d="M6.06253 21 3.57127 18.8012"></path>
|
||||
<circle
|
||||
cy="18.8012"
|
||||
cx="3.57127"
|
||||
r="0.25"
|
||||
></circle>
|
||||
<template
|
||||
v-for="[x1, y1, x2, y2] in group.segments"
|
||||
:key="`${x2},${y2}`"
|
||||
>
|
||||
<path :d="`M${x1} ${y1} ${x2} ${y2}`" />
|
||||
<circle
|
||||
:cx="x2"
|
||||
:cy="y2"
|
||||
r="0.25"
|
||||
/>
|
||||
</template>
|
||||
</motion.g>
|
||||
</motion.g>
|
||||
</motion.svg>
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: Comparison
|
||||
description: A comparison between Lucide and Feather Icons, highlighting the differences and benefits of each.
|
||||
---
|
||||
|
||||
# Comparison
|
||||
|
||||
## Lucide vs Feather Icons
|
||||
|
||||
Lucide is a community-driven fork of [Feather Icons](https://github.com/feathericons/feather).
|
||||
|
||||
The decision to create Lucide arose from growing dissatisfaction with the moderation of the Feather Icons project. With more than 300 open issues and over 100 open PRs, the Feather Icons project has been abandoned and is no longer actively maintained. Unfortunately, this means that numerous developers and designers have invested their time in contributing to Feather Icons without the possibility of their PRs being accepted.
|
||||
|
||||
In an effort to expand the icon set while remaining true to the original minimalist design language, Lucide is driven by a community of developers and designers. We strive to grow together and maintain a faithful continuation of the project.
|
||||
|
||||
### Why should I choose Lucide over Feather Icons?
|
||||
|
||||
- Lucide has expanded its icon set by 1600+ in the last few years. Lucide now has over 1800 icons, while Feather has around 287 icons.
|
||||
- Well maintained code base.
|
||||
- Active community.
|
||||
|
||||
### Should I migrate to Lucide?
|
||||
|
||||
That depends on whether you're satisfied with the icons from Feather Icons. If that is the case, it may not be worth the effort.
|
||||
However, if you find yourself struggling and feeling limited by the icons provided by Feather, you can consider migrating.
|
||||
When we forked, we didn't remove any icons, but some icons have been renamed.
|
||||
@@ -2,7 +2,6 @@
|
||||
title: What is Lucide?
|
||||
description: An introduction to Lucide, an open-source icon library that provides 1600+ vector (svg) files for displaying icons and symbols in digital and non-digital projects.
|
||||
nextPage:
|
||||
- comparison
|
||||
- installation
|
||||
---
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
"lodash-es": "^4.18.1",
|
||||
"lucide": "workspace:*",
|
||||
"lucide-react": "workspace:*",
|
||||
"motion-v": "2.4.0",
|
||||
"motion-v": "2.11.0",
|
||||
"react": "19.3.1",
|
||||
"react-dom": "19.3.1",
|
||||
"sandpack-vue3": "3.1.12",
|
||||
|
||||
@@ -12,8 +12,68 @@
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/docs/:slug(lucide-?.*)",
|
||||
"destination": "/guide/:slug",
|
||||
"source": "/docs/lucide-vue-next",
|
||||
"destination": "/guide/vue",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/packages/lucide-vue-next",
|
||||
"destination": "/guide/vue",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/vue-next",
|
||||
"destination": "/guide/vue",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/docs/lucide",
|
||||
"destination": "/guide/lucide",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/docs/lucide-:pkg",
|
||||
"destination": "/guide/:pkg",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/lucide-:pkg",
|
||||
"destination": "/guide/:pkg",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/packages/lucide-:pkg/",
|
||||
"destination": "/guide/:pkg",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/advanced/accessibility",
|
||||
"destination": "/how-to/accessibility",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/basics/:slug",
|
||||
"destination": "/guide/react/basics/:slug",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/advanced/:slug",
|
||||
"destination": "/guide/react/advanced/:slug",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/design/figma-guide",
|
||||
"destination": "/contribute/icons/figma-guide",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/design/:slug(icon-design-guide|icon-properties)",
|
||||
"destination": "/contribute/icons/design-principles",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/icons/lab/:name(carton-off|briefcase-plus)",
|
||||
"destination": "/icons/:name",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
@@ -47,11 +107,6 @@
|
||||
"destination": "/how-to/accessibility",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/advanced/accessibility",
|
||||
"destination": "/how-to/accessibility",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/guide/advanced",
|
||||
"destination": "/guide/react/advanced",
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "../group.schema.json",
|
||||
"description": "Action: moving into something or bringing something in",
|
||||
"tags": [
|
||||
"in",
|
||||
"inside",
|
||||
"inwards",
|
||||
"input",
|
||||
"incoming",
|
||||
"import",
|
||||
"insert",
|
||||
"entry",
|
||||
"entrance",
|
||||
"ingress"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"$schema": "../group.schema.json",
|
||||
"description": "Action: moving out of something or sending something out",
|
||||
"tags": [
|
||||
"out",
|
||||
"outside",
|
||||
"outwards",
|
||||
"output",
|
||||
"outgoing",
|
||||
"export",
|
||||
"leave",
|
||||
"egress"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"$schema": "../group.schema.json",
|
||||
"description": "Layout: resizing, splitting or merging panes and grid cells",
|
||||
"tags": [
|
||||
"pane",
|
||||
"grid",
|
||||
"resize",
|
||||
"window",
|
||||
"merge",
|
||||
"resizing"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"$schema": "../group.schema.json",
|
||||
"description": "Geometry: drawn strokes, paths and line segments",
|
||||
"tags": [
|
||||
"stroke",
|
||||
"path",
|
||||
"segment",
|
||||
"vector",
|
||||
"graphics",
|
||||
"design",
|
||||
"shape",
|
||||
"curve"
|
||||
]
|
||||
}
|
||||
@@ -20,6 +20,8 @@
|
||||
"investigate",
|
||||
"magnifying glass",
|
||||
"lens",
|
||||
"zoom"
|
||||
"zoom",
|
||||
"inspection",
|
||||
"visual search"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -200,11 +200,15 @@
|
||||
"$group:direction-up-left",
|
||||
"$group:direction-up-right",
|
||||
"$group:dot",
|
||||
"$group:enter",
|
||||
"$group:exclamation-mark",
|
||||
"$group:exit",
|
||||
"$group:graph",
|
||||
"$group:heart",
|
||||
"$group:key",
|
||||
"$group:layout-resize",
|
||||
"$group:letter",
|
||||
"$group:line",
|
||||
"$group:lock",
|
||||
"$group:minus",
|
||||
"$group:navigation-first",
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
"danielbayley",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Categorizing cheeses in grocery shopping apps",
|
||||
"Marking cheese-based dishes on restaurant menus"
|
||||
],
|
||||
"tags": [
|
||||
"swiss",
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M14 11a3 3 0 01-6 0 5 5 0 016 0" />
|
||||
<path d="M14.292 2.436a1.55 1.55 0 011.463-.088l.278.13A10.33 10.33 0 0122 11v8a2 2 0 01-2 2h-1.75a.28.28 0 01-.265-.25 2 2 0 00-3.97 0 .28.28 0 01-.265.25H4a2 2 0 01-2-2v-.75a.28.28 0 01.25-.265 2 2 0 00-.046-3.975.21.21 0 01-.204-.214v-2.678a2 2 0 01.952-1.703l6.062-3.732a.3.3 0 01.27-.002A2.5 2.5 0 0013 3.5l-.002-.104a.3.3 0 01.122-.24z" />
|
||||
<path d="M22 11h-8" />
|
||||
<path d="M8 11H2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 651 B |
@@ -16,6 +16,11 @@
|
||||
"name": "arrow-down-left-from-circle",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "circle-arrow-out-down-left",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 300 B After Width: | Height: | Size: 300 B |
@@ -16,6 +16,11 @@
|
||||
"name": "arrow-down-right-from-circle",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "circle-arrow-out-down-right",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 303 B |
@@ -19,6 +19,11 @@
|
||||
"name": "arrow-up-left-from-circle",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "circle-arrow-out-up-left",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 296 B |
@@ -16,6 +16,11 @@
|
||||
"name": "arrow-up-right-from-circle",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "circle-arrow-out-up-right",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 299 B After Width: | Height: | Size: 299 B |
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"n2duc"
|
||||
],
|
||||
"use-cases": [
|
||||
"Indicating a submission or payment that is still being verified",
|
||||
"Showing a deployment, upload, or backup that is finishing up",
|
||||
"Marking a task as partially completed or awaiting final approval",
|
||||
"Displaying a step in a progress tracker that is in progress"
|
||||
],
|
||||
"tags": [
|
||||
"$group:check",
|
||||
"pending",
|
||||
"progress",
|
||||
"processing",
|
||||
"verifying",
|
||||
"loading"
|
||||
],
|
||||
"categories": [
|
||||
"notifications"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 2a10 10 0 017.38 16.75" />
|
||||
<path d="m16 9-5.5 5.5L8 12" />
|
||||
<path d="M2.5 8.875a10 10 0 00-.5 3" />
|
||||
<path d="M2.83 16a10 10 0 002.43 3.4" />
|
||||
<path d="M4.636 5.235a10 10 0 01.891-.857" />
|
||||
<path d="M8.644 21.42a10 10 0 007.631-.38" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
@@ -26,5 +26,12 @@
|
||||
"text",
|
||||
"layout",
|
||||
"design"
|
||||
],
|
||||
"aliases": [
|
||||
{
|
||||
"name": "grid-3-x-2",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:grid-3x3",
|
||||
"gridalchemy"
|
||||
],
|
||||
"use-cases": [
|
||||
"Hiding grid lines on a canvas or artboard",
|
||||
"Indicating that snap to grid is turned off",
|
||||
"Hiding the cell grid in spreadsheets"
|
||||
],
|
||||
"tags": [
|
||||
"$extends:grid-3x3",
|
||||
"$group:off",
|
||||
"guides",
|
||||
"snap",
|
||||
"canvas",
|
||||
"spreadsheet",
|
||||
"cells",
|
||||
"data table",
|
||||
"diagram",
|
||||
"overlay"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:grid-3x3"
|
||||
],
|
||||
"aliases": [
|
||||
{
|
||||
"name": "grid-3-x-3-off",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M15 9.344V3" />
|
||||
<path d="m2 2 20 20" />
|
||||
<path d="M20.414 20.414A2 2 0 0119 21H5a2 2 0 01-2-2V5a2 2 0 01.586-1.414" />
|
||||
<path d="M20.656 15H21" />
|
||||
<path d="M21 9h-6.344" />
|
||||
<path d="M3 15h12v6" />
|
||||
<path d="M3 9h6v12" />
|
||||
<path d="M8.656 3H19a2 2 0 012 2v10.343" />
|
||||
<path d="M9 3v.344" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
@@ -6,12 +6,10 @@
|
||||
],
|
||||
"use-cases": [],
|
||||
"tags": [
|
||||
"line",
|
||||
"$group:line",
|
||||
"snakes",
|
||||
"annotate",
|
||||
"curve",
|
||||
"doodle",
|
||||
"stroke",
|
||||
"pen",
|
||||
"tool",
|
||||
"gesture",
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
],
|
||||
"use-cases": [],
|
||||
"tags": [
|
||||
"line",
|
||||
"stroke",
|
||||
"$group:line",
|
||||
"style",
|
||||
"dashed",
|
||||
"border"
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"jamiemlaw",
|
||||
"jguddas"
|
||||
],
|
||||
"use-cases": [
|
||||
"Picking a transport type in journey planning or racing apps",
|
||||
"Highlighting a delivery driver on a map when they ride a motorbike"
|
||||
],
|
||||
"tags": [
|
||||
"scooter",
|
||||
"two-wheeler",
|
||||
"commute",
|
||||
"urban",
|
||||
"city",
|
||||
"courier",
|
||||
"motorbike",
|
||||
"moto",
|
||||
"motorcycle",
|
||||
"transport",
|
||||
"vehicle",
|
||||
"drive",
|
||||
"ride",
|
||||
"race",
|
||||
"racing",
|
||||
"trip",
|
||||
"journey",
|
||||
"delivery",
|
||||
"off-road",
|
||||
"dirt bike",
|
||||
"trail",
|
||||
"enduro"
|
||||
],
|
||||
"categories": [
|
||||
"transportation"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="m18.16 14.12-2.927-8.447A1 1 0 0 0 14.288 5H13" />
|
||||
<path d="M19 10a7 7 0 0 0-6.928 6" />
|
||||
<path d="M2 10h5.5a3 3 0 0 1 2.747 1.795l1.669 3.803A1 1 0 0 1 11.01 17H8" />
|
||||
<circle cx="19" cy="17" r="3" />
|
||||
<circle cx="5" cy="17" r="3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 459 B |
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"ilyavred",
|
||||
"jamiemlaw"
|
||||
],
|
||||
"use-cases": [
|
||||
"Setting the opacity of layers or objects in graphic editors",
|
||||
"Adjusting the opacity of fills, strokes, or other object attributes",
|
||||
"Adjusting the alpha channel in color pickers",
|
||||
"Indicating that a layer or element is semi-transparent"
|
||||
],
|
||||
"tags": [
|
||||
"opacity",
|
||||
"opaque",
|
||||
"transparency",
|
||||
"visibility",
|
||||
"fade",
|
||||
"lens",
|
||||
"glass",
|
||||
"blur",
|
||||
"filter",
|
||||
"clear",
|
||||
"mask",
|
||||
"cover",
|
||||
"gradient"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"photography"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 3h.01" />
|
||||
<path d="M12 9h.01" />
|
||||
<path d="M15 6h.01" />
|
||||
<path d="M18 3h.01" />
|
||||
<path d="M21 6v13a2 2 0 0 1-2 2H6" />
|
||||
<path d="M3 12h.01" />
|
||||
<path d="M3 18h.01" />
|
||||
<path d="M3 6h.01" />
|
||||
<path d="M6 15h.01" />
|
||||
<path d="M6 3h.01" />
|
||||
<path d="M6 9h.01" />
|
||||
<path d="M9 12h.01" />
|
||||
<path d="M9 6h.01" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 544 B |
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:package"
|
||||
],
|
||||
"use-cases": [
|
||||
"Editing recipient addresses or package contents in shipping systems",
|
||||
"Modifying customer orders before shipment",
|
||||
"Updating product listings in inventory or e-commerce platforms",
|
||||
"Editing software package manifests or metadata"
|
||||
],
|
||||
"tags": [
|
||||
"$extends:package",
|
||||
"$group:pen"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:package"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 14.34V12l8.71-5" />
|
||||
<path d="M16.511 21.141a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 1 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .599.626z" />
|
||||
<path d="M21 9.114V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l5.087 2.907" />
|
||||
<path d="M3.29 7 12 12" />
|
||||
<path d="m7.5 4.27 9 5.15" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 564 B |
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:package"
|
||||
],
|
||||
"use-cases": [
|
||||
"Marking an unknown or unrecognized package in a package registry",
|
||||
"Indicating a dependency that is still being resolved in a package manager",
|
||||
"Indicating a lost or missing delivery package",
|
||||
"Showing a shipment with an unknown delivery status"
|
||||
],
|
||||
"tags": [
|
||||
"$extends:package",
|
||||
"$group:question-mark",
|
||||
"unresolved",
|
||||
"placeholder",
|
||||
"pending",
|
||||
"lost",
|
||||
"dependency"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:package"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 22V12l8.71-5" />
|
||||
<path d="M17 15.27c.2-.4.5-.8.9-1a2.1 2.1 0 0 1 2.6.4c.3.4.5.8.5 1.3 0 1.3-2 2-2 2" />
|
||||
<path d="M19 21.99h.01" />
|
||||
<path d="M21 10.342V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2.33-1.332" />
|
||||
<path d="M3.29 7 12 12" />
|
||||
<path d="m7.5 4.27 9 5.15" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 550 B |
@@ -21,7 +21,14 @@
|
||||
"packed",
|
||||
"archive",
|
||||
"zip",
|
||||
"module"
|
||||
"module",
|
||||
"shipping",
|
||||
"recipient",
|
||||
"inventory",
|
||||
"logistics",
|
||||
"tracking",
|
||||
"order",
|
||||
"product"
|
||||
],
|
||||
"categories": [
|
||||
"files",
|
||||
|
||||
@@ -35,5 +35,12 @@
|
||||
"categories": [
|
||||
"$extends:printer",
|
||||
"tools"
|
||||
],
|
||||
"aliases": [
|
||||
{
|
||||
"name": "printer-3-d",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -13,8 +13,7 @@
|
||||
"node",
|
||||
"click",
|
||||
"pointer",
|
||||
"target",
|
||||
"vector"
|
||||
"target"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:spline",
|
||||
|
||||
@@ -6,11 +6,9 @@
|
||||
],
|
||||
"use-cases": [],
|
||||
"tags": [
|
||||
"path",
|
||||
"$group:line",
|
||||
"pen",
|
||||
"tool",
|
||||
"shape",
|
||||
"curve",
|
||||
"draw"
|
||||
],
|
||||
"categories": [
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-down",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Downloading content to a device",
|
||||
"Contracting a pane or grid cell from its top edge",
|
||||
"Expanding a pane into a neighboring cell in a dashboard"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-down",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"download",
|
||||
"press",
|
||||
"cell",
|
||||
"split"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-down",
|
||||
"files"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 3v10" />
|
||||
<path d="M16 3h3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h3" />
|
||||
<path d="m8 9 4 4 4-4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 342 B |
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-down",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Expanding a pane or grid cell past its bottom edge",
|
||||
"Resizing neighboring panes in code editors or dashboards"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-down",
|
||||
"$group:exit",
|
||||
"$group:layout-resize",
|
||||
"pour",
|
||||
"empty",
|
||||
"cell",
|
||||
"expand"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-down"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 11v10" />
|
||||
<path d="M17.67 21H19a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h1.33" />
|
||||
<path d="m8 17 4 4 4-4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-down-left-exit",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Docking a floating pane back into the main window",
|
||||
"Contracting a pane or grid cell from its top-right corner",
|
||||
"Merging neighboring panes in a code editor layout"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-down-left",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"collapse",
|
||||
"exit",
|
||||
"close",
|
||||
"return",
|
||||
"dock"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-down-left-exit"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M11 7v6h6" />
|
||||
<path d="m20 4-9 9" />
|
||||
<path d="M21 8.67V19a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h10.33" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 333 B |
@@ -16,6 +16,11 @@
|
||||
"name": "arrow-down-left-from-square",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "square-arrow-out-down-left",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 331 B |
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-down-right-exit",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Contracting a pane or grid cell from its top-left corner",
|
||||
"Expanding a pane into the lower-right neighboring cell"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-down-right",
|
||||
"$group:enter",
|
||||
"$group:layout-resize"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-down-right-exit"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M13 7v6H7" />
|
||||
<path d="m4 4 9 9" />
|
||||
<path d="M8.67 3H19a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V8.67" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 331 B |
@@ -16,6 +16,11 @@
|
||||
"name": "arrow-down-right-from-square",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "square-arrow-out-down-right",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 334 B After Width: | Height: | Size: 334 B |
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-left",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Contracting a pane or grid cell from its right edge",
|
||||
"Expanding a pane into an adjacent cell in grid layouts"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-left",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"reverse",
|
||||
"back",
|
||||
"<-",
|
||||
"cell",
|
||||
"expand",
|
||||
"collapse",
|
||||
"split"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-left"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="m15 8-4 4 4 4" />
|
||||
<path d="M21 12H11" />
|
||||
<path d="M21 16v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 345 B |
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-left",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Expanding a pane or grid cell past its left edge",
|
||||
"Contracting a pane into its left neighbor in window layouts"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-left",
|
||||
"$group:exit",
|
||||
"$group:layout-resize",
|
||||
"back",
|
||||
"reverse",
|
||||
"<-",
|
||||
"collapse"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-left"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M13 12H3" />
|
||||
<path d="M3 17.67V19a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v1.33" />
|
||||
<path d="m7 8-4 4 4 4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
@@ -3,23 +3,37 @@
|
||||
"contributors": [
|
||||
"ethanhazel",
|
||||
"karsa-mistmere",
|
||||
"ericfennis"
|
||||
"ericfennis",
|
||||
"6teloiv",
|
||||
"lukedukeus"
|
||||
],
|
||||
"use-cases": [
|
||||
"Signing in to an account",
|
||||
"Joining a room or shared session",
|
||||
"Marking inputs on nodes in a node-based editor",
|
||||
"Contracting a pane or grid cell from its left edge"
|
||||
],
|
||||
"use-cases": [],
|
||||
"tags": [
|
||||
"$group:direction-right",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"left",
|
||||
"in",
|
||||
"inside",
|
||||
"input",
|
||||
"insert",
|
||||
"source",
|
||||
"import",
|
||||
"place",
|
||||
"->"
|
||||
"->",
|
||||
"sign in",
|
||||
"log in",
|
||||
"login",
|
||||
"join",
|
||||
"auth",
|
||||
"data flow",
|
||||
"node editor",
|
||||
"panel",
|
||||
"expand"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-right",
|
||||
"account"
|
||||
"account",
|
||||
"development"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m10 16 4-4-4-4" />
|
||||
<path d="M3 12h11" />
|
||||
<path d="M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" />
|
||||
<path d="M3 12h10" />
|
||||
<path d="M3 8V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2v-3" />
|
||||
<path d="m9 16 4-4-4-4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 344 B |
@@ -3,19 +3,35 @@
|
||||
"contributors": [
|
||||
"ethanhazel",
|
||||
"karsa-mistmere",
|
||||
"ericfennis"
|
||||
"ericfennis",
|
||||
"6teloiv",
|
||||
"lukedukeus"
|
||||
],
|
||||
"use-cases": [
|
||||
"Signing out of an account",
|
||||
"Exporting data to a file or another app",
|
||||
"Marking outputs on nodes in a node-based editor",
|
||||
"Expanding a pane or grid cell past its right edge"
|
||||
],
|
||||
"use-cases": [],
|
||||
"tags": [
|
||||
"$group:direction-right",
|
||||
"out",
|
||||
"outside",
|
||||
"output",
|
||||
"export",
|
||||
"->"
|
||||
"$group:exit",
|
||||
"$group:layout-resize",
|
||||
"->",
|
||||
"sign out",
|
||||
"log out",
|
||||
"logout",
|
||||
"auth",
|
||||
"data flow",
|
||||
"node editor",
|
||||
"expand",
|
||||
"panel",
|
||||
"cell",
|
||||
"outbound"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-right",
|
||||
"account"
|
||||
"account",
|
||||
"development"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M10 12h11" />
|
||||
<path d="M11 12h10" />
|
||||
<path d="m17 16 4-4-4-4" />
|
||||
<path d="M21 6.344V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.344" />
|
||||
<path d="M21 6.33V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-1.33" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 353 B |
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-up",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Projecting content onto a screen",
|
||||
"Contracting a pane or grid cell from its bottom edge",
|
||||
"Expanding a pane into an adjacent cell in a window grid"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-up",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"project",
|
||||
"cast",
|
||||
"screen",
|
||||
"projection",
|
||||
"presentation",
|
||||
"expand",
|
||||
"cell"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-up"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 21V11" />
|
||||
<path d="m16 15-4-4-4 4" />
|
||||
<path d="M8 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2h-3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 347 B |
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-up",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Uploading content from a device",
|
||||
"Sharing content with another app or person",
|
||||
"Expanding a pane or grid cell past its top edge"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-up",
|
||||
"$group:exit",
|
||||
"upload",
|
||||
"share",
|
||||
"external link",
|
||||
"pop out",
|
||||
"open in new window"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-up",
|
||||
"files",
|
||||
"social"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 13V3" />
|
||||
<path d="m16 7-4-4-4 4" />
|
||||
<path d="M6.33 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2h-1.33" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 350 B |
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-up-left-exit",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Contracting a pane or grid cell from its bottom-right corner",
|
||||
"Merging adjacent panes in code editors"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-up-left",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"merging"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-arrow-up-left-exit"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M15.33 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10.33" />
|
||||
<path d="M17 11h-6v6" />
|
||||
<path d="m20 20-9-9" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 336 B |
@@ -16,6 +16,11 @@
|
||||
"name": "arrow-up-left-from-square",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "square-arrow-out-up-left",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 329 B After Width: | Height: | Size: 329 B |
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-arrow-up-right-exit",
|
||||
"6teloiv"
|
||||
],
|
||||
"use-cases": [
|
||||
"Contracting a pane or grid cell from its bottom-left corner",
|
||||
"Expanding a pane or grid cell toward its upper-right corner"
|
||||
],
|
||||
"tags": [
|
||||
"$group:direction-up-right",
|
||||
"$group:enter",
|
||||
"$group:layout-resize",
|
||||
"expand",
|
||||
"contract"
|
||||
],
|
||||
"categories": [
|
||||
"arrows"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M13 17v-6H7" />
|
||||
<path d="M3 15.33V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H8.67" />
|
||||
<path d="m4 20 9-9" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
@@ -21,6 +21,11 @@
|
||||
"name": "arrow-up-right-from-square",
|
||||
"deprecationReason": "alias.name",
|
||||
"deprecated": true
|
||||
},
|
||||
{
|
||||
"name": "square-arrow-out-up-right",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 330 B After Width: | Height: | Size: 330 B |
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:square-dashed",
|
||||
"domarku"
|
||||
],
|
||||
"use-cases": [
|
||||
"Searching within a selected region",
|
||||
"Finding content inside a placeholder area",
|
||||
"Scanning a marquee selection",
|
||||
"Zooming a selected region"
|
||||
],
|
||||
"tags": [
|
||||
"$extends:square-dashed",
|
||||
"$group:search"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:square-dashed"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M14 3h1" />
|
||||
<path d="M19 3a2 2 0 012 2" />
|
||||
<path d="m21 21-1.875-1.875" />
|
||||
<path d="M21 9v1" />
|
||||
<path d="M3 14v1" />
|
||||
<path d="M3 9v1" />
|
||||
<path d="M5 21a2 2 0 01-2-2" />
|
||||
<path d="M5 3a2 2 0 00-2 2" />
|
||||
<path d="M9 21h1" />
|
||||
<path d="M9 3h1" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 513 B |
@@ -15,7 +15,10 @@
|
||||
"marquee",
|
||||
"tool",
|
||||
"dashed",
|
||||
"box"
|
||||
"box",
|
||||
"region",
|
||||
"area",
|
||||
"region of interest"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Set the line cap to butt in a vector graphics editor"
|
||||
],
|
||||
"tags": [
|
||||
"$group:line",
|
||||
"endpoint",
|
||||
"flat",
|
||||
"flush"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M14 12h2" />
|
||||
<path d="M2 12h2" />
|
||||
<path d="M2 4h18a2 2 0 012 2v12a2 2 0 01-2 2H2" />
|
||||
<path d="M20 12h2" />
|
||||
<path d="M8 12h2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Set the line cap to round in a vector graphics editor"
|
||||
],
|
||||
"tags": [
|
||||
"$group:line",
|
||||
"endpoint",
|
||||
"arc",
|
||||
"circular",
|
||||
"smooth"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M13.99 12H14" />
|
||||
<path d="M2 12h2" />
|
||||
<path d="M2 4h12a8 8 0 010 16H2" />
|
||||
<path d="M8 12h2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 320 B |
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Set the line cap to square in a vector graphics editor"
|
||||
],
|
||||
"tags": [
|
||||
"$group:line",
|
||||
"endpoint",
|
||||
"projecting",
|
||||
"extended",
|
||||
"flat"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M13.99 12H14" />
|
||||
<path d="M2 12h2" />
|
||||
<path d="M2 4h18a2 2 0 012 2v12a2 2 0 01-2 2H2" />
|
||||
<path d="M8 12h2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 335 B |
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"rrod497",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Applying beveled corners to strokes in vector editors"
|
||||
],
|
||||
"tags": [
|
||||
"$group:line",
|
||||
"edge",
|
||||
"intersection",
|
||||
"angle",
|
||||
"chamfer",
|
||||
"trim",
|
||||
"flat",
|
||||
"diagonal"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M11 21v-2.002" />
|
||||
<path d="M3 3h8.002a2.4 2.4 0 011.704.706l7.588 7.588A2.4 2.4 0 0121 12.998V21" />
|
||||
<path d="M5 13H3" />
|
||||
<path d="M9 13h1a1 1 0 011 1v1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 382 B |
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"rrod497",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Applying sharp corners to strokes in vector editors"
|
||||
],
|
||||
"tags": [
|
||||
"$group:line",
|
||||
"edge",
|
||||
"intersection",
|
||||
"angle",
|
||||
"sharp",
|
||||
"rect"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M11 21v-2.002" />
|
||||
<path d="M3 3h16a2 2 0 012 2v16" />
|
||||
<path d="M5 13H3" />
|
||||
<path d="M9 13h1a1 1 0 011 1v1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 335 B |
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"rrod497",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"use-cases": [
|
||||
"Applying rounded corners to strokes in vector editors"
|
||||
],
|
||||
"tags": [
|
||||
"$group:line",
|
||||
"edge",
|
||||
"intersection",
|
||||
"angle",
|
||||
"arc",
|
||||
"circular",
|
||||
"smooth"
|
||||
],
|
||||
"categories": [
|
||||
"design",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M11 21v-2.002" />
|
||||
<path d="M3 3h8a10 10 0 0110 10v8" />
|
||||
<path d="M5 13H3" />
|
||||
<path d="M9 13h1a1 1 0 011 1v1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:user"
|
||||
],
|
||||
"use-cases": [
|
||||
"Flagging an account as suspicious in moderation tools",
|
||||
"Indicating a problem with a user's account or profile",
|
||||
"Showing that a user has received a warning",
|
||||
"Issuing a warning to a member in community management"
|
||||
],
|
||||
"tags": [
|
||||
"$extends:user",
|
||||
"$group:exclamation-mark",
|
||||
"flagged",
|
||||
"suspicious",
|
||||
"reported",
|
||||
"violation",
|
||||
"moderation",
|
||||
"account issue",
|
||||
"review"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:user"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M15 15H9a4 4 0 00-4 4v2" />
|
||||
<path d="M18.988 13v4" />
|
||||
<path d="M18.988 21h.01" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 339 B |
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"$extends:user-round"
|
||||
],
|
||||
"use-cases": [
|
||||
"$extends:user-exclamation-point"
|
||||
],
|
||||
"tags": [
|
||||
"$extends:user-round",
|
||||
"$extends:user-exclamation-point"
|
||||
],
|
||||
"categories": [
|
||||
"$extends:user-round"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M19.99 13v4" />
|
||||
<path d="M19.99 21H20" />
|
||||
<path d="M4 21a8 8 0 0111.99-6.934" />
|
||||
<circle cx="12" cy="8" r="5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
@@ -1,17 +0,0 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M21 19v-7c-1-6-7-9-7-9l-2.1 1.5a2 2 0 0 1-3 2.2L3 11v9c0 .6.4 1 1 1h3a2 2 0 0 1 4 0h8" />
|
||||
<path d="M9 12H3" />
|
||||
<path d="M9 12c0-.8 1.3-1.5 3-1.5s3 .7 3 1.5a3 3 0 1 1-6 0" />
|
||||
<path d="M21 12h-6" />
|
||||
<circle cx="19" cy="19" r="2" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 457 B |
@@ -55,11 +55,12 @@
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm check:icon-subpaths",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
|
||||
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts --withAliases --separateAliasesFile --separateAliasesFileIgnore=fingerprint --aliasesFileExtension=.ts",
|
||||
"build:bundles": "rollup -c ./rollup.config.mjs",
|
||||
"check:icon-subpaths": "node ./scripts/checkIconSubpaths.mts",
|
||||
"test": "pnpm build:icons && vitest run",
|
||||
"test:watch": "vitest watch",
|
||||
"typecheck": "pnpm build:icons && tsc"
|
||||
|
||||
@@ -11,7 +11,14 @@ const dtsOptions = {
|
||||
const packageName = 'LucideReact';
|
||||
const outputFileName = 'lucide-react-native';
|
||||
const outputDir = 'dist';
|
||||
const inputs = ['src/lucide-react-native.ts', 'src/icons/index.ts'];
|
||||
const iconAndAliasEntries = await getIconEntryNamesAndAliases();
|
||||
// Alias modules (e.g. `icons/trash-2`) aren't imported by the index, so list them as entries
|
||||
// to emit the runtime files the `./icons/*` export map points at.
|
||||
const inputs = [
|
||||
'src/lucide-react-native.ts',
|
||||
'src/icons/index.ts',
|
||||
...Object.values(iconAndAliasEntries),
|
||||
];
|
||||
const bundles = [
|
||||
{
|
||||
format: 'cjs',
|
||||
@@ -28,7 +35,6 @@ const bundles = [
|
||||
},
|
||||
];
|
||||
|
||||
const iconAndAliasEntries = await getIconEntryNamesAndAliases();
|
||||
const typesModuleMatcher = /[/\\]src[/\\]types\.(d\.)?ts$/;
|
||||
|
||||
const configs = bundles.map(({ inputs, outputDir, format, preserveModules, extension = 'js' }) => ({
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
// Fails the build when an `icons/*` subpath has type declarations but no runtime file.
|
||||
import { existsSync, readdirSync } from 'node:fs';
|
||||
|
||||
const declarations = readdirSync('dist/types/icons').filter((file) => file.endsWith('.d.ts'));
|
||||
|
||||
const missing = declarations.flatMap((file) => {
|
||||
const name = file.replace(/\.d\.ts$/, '');
|
||||
return [`dist/esm/icons/${name}.mjs`, `dist/cjs/icons/${name}.js`].filter(
|
||||
(runtimeFile) => !existsSync(runtimeFile),
|
||||
);
|
||||
});
|
||||
|
||||
if (missing.length > 0) {
|
||||
console.error(`Missing runtime files for icon subpaths:\n${missing.join('\n')}`);
|
||||
process.exit(1);
|
||||
}
|
||||
@@ -198,8 +198,8 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../packages/lucide-react
|
||||
motion-v:
|
||||
specifier: 2.4.0
|
||||
version: 2.4.0(@vueuse/core@14.4.0(vue@3.5.44(typescript@6.0.3)))(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vue@3.5.44(typescript@6.0.3))
|
||||
specifier: 2.11.0
|
||||
version: 2.11.0(@vueuse/core@14.4.0(vue@3.5.44(typescript@6.0.3)))(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vue@3.5.44(typescript@6.0.3))
|
||||
react:
|
||||
specifier: 19.3.1
|
||||
version: 19.3.1
|
||||
@@ -8906,16 +8906,19 @@ packages:
|
||||
fraction.js@5.3.4:
|
||||
resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
|
||||
|
||||
framer-motion@13.2.0:
|
||||
resolution: {integrity: sha512-9E33ebgMaO33w1nN/jEdW8z3/GO483fMi4rqbMG9rt83XgW9QLKRe4NcmJ8s+fQ3O34++UHrIQwlIWGIWTITjA==}
|
||||
framer-motion@14.9.0:
|
||||
resolution: {integrity: sha512-g1hZu8WoTwgsoVAaqEEcefhvR03cKGtkmrKaRrWpXhnM3LGR8jl1u2qyJ1PMVlO7LKQHE8TTRQYUlMmnrY4L+g==}
|
||||
peerDependencies:
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
remix: ^3.1.0
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
remix:
|
||||
optional: true
|
||||
|
||||
fresh@0.5.2:
|
||||
resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
|
||||
@@ -10297,14 +10300,14 @@ packages:
|
||||
resolution: {integrity: sha512-tljKC0ex20AjO58Ob/eZ53JloycbVswbVNCHx6V6VLGzqt/w8dIynVGL0G8qVjNKwiA7sYSogCrN6QtJ82IV+g==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
motion-dom@13.2.0:
|
||||
resolution: {integrity: sha512-N6gdSoWRDk0Rh/fVtlqUtLs+fEN3ELFZI3cn3IQE9Mnf3E+Mh8wjO6MstzCOPFh4Yf0L1as5m2eUyYWj8ylVSQ==}
|
||||
motion-dom@14.9.0:
|
||||
resolution: {integrity: sha512-wGjKbNDMHd75aLStkxLCKZ+T8/wusZHklmNLK1Ak68UrdBt2X8I4yweYR/0WonxGnBsw6oloDTIV8pN+UTvzzA==}
|
||||
|
||||
motion-utils@13.0.0:
|
||||
resolution: {integrity: sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ==}
|
||||
motion-utils@14.7.0:
|
||||
resolution: {integrity: sha512-woO0/Nb7ys75f94fjvQi/6leiHGvZUYkeHUPEZ3vxsV+9OpEVhkxp01x8MlRwX0zt31EqgXsKDAoBoJLC148Tw==}
|
||||
|
||||
motion-v@2.4.0:
|
||||
resolution: {integrity: sha512-kRDGMAZk3nvdjEO36Wo6pezSEIStGXGhVFiwo1QkUDsUg8mB5igjYPXyece8wtu2DrHhmFfA6Y1nOz07+5QH4A==}
|
||||
motion-v@2.11.0:
|
||||
resolution: {integrity: sha512-zOq6ccT5IW0G7sLVYZfUD60NBoD2doTRQfd2OA9k3WLuQ3f/z38YkrBAts3OtpA5N3kir+iVUIPKw98ZQnwv2w==}
|
||||
peerDependencies:
|
||||
'@vueuse/core': '>=10.0.0'
|
||||
vue: '>=3.0.0'
|
||||
@@ -21630,10 +21633,10 @@ snapshots:
|
||||
|
||||
fraction.js@5.3.4: {}
|
||||
|
||||
framer-motion@13.2.0(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
|
||||
framer-motion@14.9.0(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
|
||||
dependencies:
|
||||
motion-dom: 13.2.0
|
||||
motion-utils: 13.0.0
|
||||
motion-dom: 14.9.0
|
||||
motion-utils: 14.7.0
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
react: 19.3.1
|
||||
@@ -23328,23 +23331,24 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
motion-dom@13.2.0:
|
||||
motion-dom@14.9.0:
|
||||
dependencies:
|
||||
motion-utils: 13.0.0
|
||||
motion-utils: 14.7.0
|
||||
|
||||
motion-utils@13.0.0: {}
|
||||
motion-utils@14.7.0: {}
|
||||
|
||||
motion-v@2.4.0(@vueuse/core@14.4.0(vue@3.5.44(typescript@6.0.3)))(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vue@3.5.44(typescript@6.0.3)):
|
||||
motion-v@2.11.0(@vueuse/core@14.4.0(vue@3.5.44(typescript@6.0.3)))(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vue@3.5.44(typescript@6.0.3)):
|
||||
dependencies:
|
||||
'@vueuse/core': 14.4.0(vue@3.5.44(typescript@6.0.3))
|
||||
framer-motion: 13.2.0(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
|
||||
framer-motion: 14.9.0(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
|
||||
hey-listen: 1.0.8
|
||||
motion-dom: 13.2.0
|
||||
motion-utils: 13.0.0
|
||||
motion-dom: 14.9.0
|
||||
motion-utils: 14.7.0
|
||||
vue: 3.5.44(typescript@6.0.3)
|
||||
transitivePeerDependencies:
|
||||
- react
|
||||
- react-dom
|
||||
- remix
|
||||
|
||||
mri@1.2.0: {}
|
||||
|
||||
|
||||
@@ -36,9 +36,21 @@ Promise.all(
|
||||
const metaJson = await fs.readFile(path.resolve(ICONS_DIR, `${iconName}.json`), 'utf-8');
|
||||
const iconMetaData = JSON.parse(metaJson);
|
||||
|
||||
const aliases = iconMetaData.aliases ?? [];
|
||||
if (!aliases.includes(iconNameKebabCaseNextjsFlavour)) {
|
||||
aliases.push(iconNameKebabCaseNextjsFlavour);
|
||||
const aliases: (
|
||||
| string
|
||||
| { name: string; deprecationReason?: string; deprecated?: boolean }
|
||||
)[] = iconMetaData.aliases ?? [];
|
||||
const hasAlias = aliases.some(
|
||||
(alias) =>
|
||||
(typeof alias === 'string' ? alias : alias.name) === iconNameKebabCaseNextjsFlavour,
|
||||
);
|
||||
|
||||
if (!hasAlias) {
|
||||
aliases.push({
|
||||
name: iconNameKebabCaseNextjsFlavour,
|
||||
deprecationReason: 'alias.name',
|
||||
deprecated: true,
|
||||
});
|
||||
}
|
||||
|
||||
let output = JSON.stringify({ ...iconMetaData, aliases }, null, 2);
|
||||
|
||||