mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
Add steps
This commit is contained in:
@@ -5,7 +5,7 @@ interface Props {
|
||||
modelValue: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
steps?: number;
|
||||
step?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -28,6 +28,7 @@ const percentage = computed<string>(() => `${((props.modelValue - props.min) / (
|
||||
v-on:input="$emit('update:modelValue', Number($event.target.value))"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
/>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
|
||||
@@ -83,9 +83,9 @@ function resetStyle () {
|
||||
id="stroke-width"
|
||||
name="stroke-width"
|
||||
v-model="strokeWidth"
|
||||
:min="1"
|
||||
:min="0.5"
|
||||
:max="4"
|
||||
:steps="0.5"
|
||||
:step="0.5"
|
||||
/>
|
||||
</InputField>
|
||||
|
||||
@@ -102,6 +102,7 @@ function resetStyle () {
|
||||
v-model="size"
|
||||
:min="16"
|
||||
:max="48"
|
||||
:step="4"
|
||||
/>
|
||||
</InputField>
|
||||
</div>
|
||||
|
||||
@@ -40,6 +40,28 @@ export default defineConfig({
|
||||
{ text: 'Installation', link: '/guide/installation' }
|
||||
]
|
||||
},
|
||||
// {
|
||||
// test: 'Using Icons',
|
||||
// items: [
|
||||
// {
|
||||
// text: 'How to use icons',
|
||||
// link: 'how-to-use-icons'
|
||||
// },
|
||||
// {
|
||||
// text: 'Styling icons',
|
||||
// link: 'styling-icons'
|
||||
// },
|
||||
// {
|
||||
// text: 'Accessibility',
|
||||
// link: 'accessibility'
|
||||
// },
|
||||
// {
|
||||
// text: 'What should I use',
|
||||
// link: 'what-should-i-use'
|
||||
// },
|
||||
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
text: 'Packages',
|
||||
items: [
|
||||
@@ -67,6 +89,10 @@ export default defineConfig({
|
||||
text: 'Lucide Svelte',
|
||||
link: '/guide/packages/lucide-svelte'
|
||||
},
|
||||
{
|
||||
text: 'Lucide Solid',
|
||||
link: '/guide/packages/lucide-solid'
|
||||
},
|
||||
{
|
||||
text: 'Lucide Preact',
|
||||
link: '/guide/packages/lucide-preact'
|
||||
@@ -84,7 +110,28 @@ export default defineConfig({
|
||||
link: '/guide/packages/lucide-flutter'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Contributing',
|
||||
items: [
|
||||
{
|
||||
text: 'Icon Design Principles',
|
||||
link: '/guide/design/icon-design-guide'
|
||||
},
|
||||
{
|
||||
text: 'Designing in Illustrator',
|
||||
link: '/guide/design/illustrator-guide'
|
||||
},
|
||||
{
|
||||
text: 'Designing in InkScape',
|
||||
link: '/guide/design/inkscape-guide'
|
||||
},
|
||||
{
|
||||
text: 'Designing in Figma',
|
||||
link: '/guide/design/figma-guide'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
'icons': [
|
||||
{ text: '', link: '/' },
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
const docsMenuTree = [
|
||||
{
|
||||
section: 'Getting Started',
|
||||
items: [
|
||||
{
|
||||
title: 'Introduction',
|
||||
href: ''
|
||||
},
|
||||
{
|
||||
title: 'Installation',
|
||||
href: 'installation'
|
||||
},
|
||||
{
|
||||
title: 'Comparison',
|
||||
href: 'comparison'
|
||||
},
|
||||
// {
|
||||
// title: 'Examples',
|
||||
// href: 'examples'
|
||||
// }
|
||||
]
|
||||
},
|
||||
// {
|
||||
// section: 'Using Icons',
|
||||
// items: [
|
||||
// {
|
||||
// title: 'What should I use',
|
||||
// href: 'what-should-i-use'
|
||||
// },
|
||||
// {
|
||||
// title: 'For Web (Vanilla)',
|
||||
// href: 'lucide-with-web'
|
||||
// },
|
||||
// {
|
||||
// title: 'React',
|
||||
// href: 'lucide-with-react'
|
||||
// },
|
||||
// {
|
||||
// title: 'Vue',
|
||||
// href: 'lucide-with-vue'
|
||||
// },
|
||||
// {
|
||||
// title: 'Angular',
|
||||
// href: 'lucide-with-angular'
|
||||
// },
|
||||
// {
|
||||
// title: 'Preact',
|
||||
// href: 'lucide-with-preact'
|
||||
// },
|
||||
// {
|
||||
// title: 'nodejs',
|
||||
// href: 'lucide-with-nodejs'
|
||||
// },
|
||||
// {
|
||||
// title: 'Flutter',
|
||||
// href: 'lucide-with-flutter'
|
||||
// },
|
||||
// {
|
||||
// title: 'Figma',
|
||||
// href: 'lucide-with-figma'
|
||||
// },
|
||||
// {
|
||||
// title: 'Other Design programs',
|
||||
// href: 'lucide-with-design-programs'
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
section: 'Packages',
|
||||
items: [
|
||||
{
|
||||
title: 'Lucide',
|
||||
href: 'lucide'
|
||||
},
|
||||
{
|
||||
title: 'Lucide React',
|
||||
href: 'lucide-react'
|
||||
},
|
||||
{
|
||||
title: 'Lucide React Native',
|
||||
href: 'lucide-react-native'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Vue',
|
||||
href: 'lucide-vue'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Vue Next (Vue 3)',
|
||||
href: 'lucide-vue-next'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Svelte',
|
||||
href: 'lucide-svelte'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Preact',
|
||||
href: 'lucide-preact'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Angular',
|
||||
href: 'lucide-angular'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Static',
|
||||
href: 'lucide-static'
|
||||
},
|
||||
{
|
||||
title: 'Lucide Flutter',
|
||||
href: 'lucide-flutter'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
section: 'Contributing',
|
||||
items: [
|
||||
{
|
||||
title: 'Icon Design Principles',
|
||||
href: 'icon-design-guide'
|
||||
},
|
||||
{
|
||||
title: 'Designing in Illustrator',
|
||||
href: 'illustrator-guide'
|
||||
},
|
||||
{
|
||||
title: 'Designing in InkScape',
|
||||
href: 'inkscape-guide'
|
||||
},
|
||||
{
|
||||
title: 'Designing in Figma',
|
||||
href: 'figma-guide'
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
export default docsMenuTree;
|
||||
@@ -1,13 +0,0 @@
|
||||
import NextCache from './nextCache';
|
||||
import {getAllData} from './icons';
|
||||
|
||||
export type Tags = {[iconName: string]: string[]};
|
||||
|
||||
export function fetchTags(writeCache = true): Promise<Tags> {
|
||||
return NextCache.resolve('api-tags', async () => {
|
||||
return (await getAllData()).reduce((acc, icon) => {
|
||||
acc[icon.name] = icon.tags;
|
||||
return acc;
|
||||
}, {});
|
||||
}, writeCache);
|
||||
}
|
||||
Reference in New Issue
Block a user