hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-14 13:58:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve grid

Browse Source
This commit is contained in:
Eric Fennis
2023-04-14 11:56:28 +02:00
parent 0e404deaf9
commit 9e9f11321c
11 changed files with 150 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -20,3 +20,4 @@ packages/**/src/aliases.ts
packages/**/LICENSE
categories.json
tags.json
.vercel
docs/.vitepress/components/HomeHeroIconsCard.vue
+8 -6
View File
@@ -6,12 +6,14 @@ console.log(data);
</script>
<template>
<TransitionGroup class="icons-card" name="list" tag="div">
<LucideIcon
v-for="icon in data.icons"
v-bind="icon"
/>
</TransitionGroup>
<div class="icons-card">
<TransitionGroup name="list">
<LucideIcon
v-for="icon in data.icons"
v-bind="icon"
/>
</TransitionGroup>
</div>
</template>
<style scoped>
docs/.vitepress/components/IconDetailOverlay.vue
+9 -4
View File
@@ -56,25 +56,30 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
.overlay-container {
position: fixed;
top: 0;
left: 0;
right: 0;
left: var(--left, 0);
right: var(--right, 0);
bottom: 0;
pointer-events: none;
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
width: auto;
}
@media (min-width: 960px) {
.overlay-container {
left: var(--vp-sidebar-width);
--left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.overlay-container {
left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
--left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
--right: calc(((100% - (var(--vp-layout-max-width) - var(--vp-sidebar-width))) - 272px) / 2);
}
.overlay-panel {
border-top-right-radius: 8px;
}
}
docs/.vitepress/components/IconGrid.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup lang="ts">
import type { IconEntity } from '../types'
import IconItem from './IconItem.vue'
const emit = defineEmits(['setActiveIcon'])
defineProps<{
icons: IconEntity[]
activeIcon: string
}>()
function setActiveIcon(name: string) {
console.log(name);
emit('setActiveIcon', name)
}
</script>
<template>
<div class="icons">
<div class="icon" v-for="icon in icons" :key="icon.name">
<IconItem v-bind="icon" @setActiveIcon="setActiveIcon(icon.name)" :active="activeIcon === icon.name"/>
</div>
</div>
</template>
<style>
.icons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
/* padding: 32px 32px 96px; */
gap: 8px;
width: 100%;
}
.icon {
aspect-ratio: 1/1;
}
</style>
docs/.vitepress/components/IconsCategoryOverview.vue
+64
View File
@@ -0,0 +1,64 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { IconEntity, Category } from '../types'
import IconItem from './IconItem.vue'
import IconDetailOverlay from './IconDetailOverlay.vue'
import IconGrid from './IconGrid.vue'
const props = defineProps<{
icons: IconEntity[]
categories: Category[]
}>()
const activeIconName = ref('')
function setActiveIconName(name: string) {
activeIconName.value = name
}
const activeIcon = computed(() =>
props.icons?.find((icon) => icon.name === activeIconName.value)
)
const categories = computed(() => {
if( !props.categories?.length || !props.icons?.length ) return []
return props.categories.map(({ name, title }) => {
const categoryIcons = props.icons.filter((icon) => props.icons.categories.includes(name))
// const isSearching = icons.length !== data.length;
// const searchResults = isSearching
// ? categoryIcons.filter(icon => icons.some((item) => item?.name === icon?.name))
// : categoryIcons;
return {
title,
name,
icons: categoryIcons,
// isActive: name === activeCategory,
};
})
})
</script>
<template>
<section class="category" v-for="category in categories" :key="category.name">
<h2 >{{ category.title }}</h2>
<IconGrid :activeIcon="activeIcon" :icons="icons" @setActiveIcon="setActiveIconName"/>
</section>
<IconDetailOverlay :icon="activeIcon" @close="setActiveIconName('')"/>
</template>
<style>
.icons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
/* padding: 32px 32px 96px; */
gap: 8px;
width: 100%;
}
.icon {
aspect-ratio: 1/1;
}
</style>
docs/.vitepress/components/IconsOverview.vue
+3 -6
View File
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
import type { IconEntity } from '../types'
import IconItem from './IconItem.vue'
import IconDetailOverlay from './IconDetailOverlay.vue'
import IconGrid from './IconGrid.vue'
const props = defineProps<{
icons: IconEntity[]
@@ -21,11 +22,7 @@ const activeIcon = computed(() =>
</script>
<template>
<div class="icons">
<div class="icon" v-for="icon in icons" :key="icon.name">
<IconItem v-bind="icon" @setActiveIcon="setActiveIconName" :active="activeIconName === icon.name"/>
</div>
</div>
<IconGrid :activeIcon="activeIconName" :icons="icons" @setActiveIcon="setActiveIconName"/>
<IconDetailOverlay :icon="activeIcon" @close="setActiveIconName('')"/>
</template>
@@ -33,7 +30,7 @@ const activeIcon = computed(() =>
.icons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
padding: 32px 32px 96px;
/* padding: 32px 32px 96px; */
gap: 8px;
width: 100%;
}
docs/.vitepress/components/PageContainer.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<div class="container">
<slot />
</div>
</template>
<style scoped>
.container {
padding: 32px 32px 96px;
}
</style>
docs/guide/custom-page.md
+2 -2
View File
@@ -1,7 +1,7 @@
<script setup>
import Test from '../components/Test.vue'
import Test from '../.vitepress/components/Test.vue'
</script>
Hello world
<Test/>
<Test/>
docs/icons/categorized.md
+7 -10
View File
@@ -3,19 +3,16 @@ layout: page
outlineTitle: Categories
---
<script setup>
import { onMounted } from 'vue'
<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { data } from './index.data.ts'
import PageContainer from '../.vitepress/components/PageContainer.vue'
import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOverview.vue'
const { categories, icons } = data
onMounted(() => {
console.log(data)
})
</script>
<div class="VPDoc content">
<section class="category" v-for="category in categories" :key="category.name">
<h2 >{{ category.title }}</h2>
</section>
<PageContainer>
<IconsCategoryOverview :categories="data.categories" :icon="data.icons" />
</PageContainer>
</div>
docs/icons/index.md
+4 -1
View File
@@ -8,6 +8,7 @@ outlineTitle: Categories
import { onMounted } from 'vue'
import { data } from './index.data.ts'
import IconsOverview from '../.vitepress/components/IconsOverview.vue'
import PageContainer from '../.vitepress/components/PageContainer.vue'
const { categories, icons } = data
onMounted(() => {
@@ -15,4 +16,6 @@ onMounted(() => {
})
</script>
<IconsOverview :icons="icons" />
<PageContainer>
<IconsOverview :icons="icons" />
</PageContainer>
docs/index.md
+1 -1
View File
@@ -25,7 +25,7 @@ features:
- title: Lightweight & Scalable
details: Icons are lightweight, highly optimized scalable vector graphics (SVG).
icon: |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" x2="20.05" y1="8" y2="17.94"></line><line x1="9.69" x2="21.17" y1="8" y2="8"></line><line x1="7.38" x2="13.12" y1="12" y2="2.06"></line><line x1="9.69" x2="3.95" y1="16" y2="6.06"></line><line x1="14.31" x2="2.83" y1="16" y2="16"></line><line x1="16.62" x2="10.88" y1="12" y2="21.94"></line></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-expand"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"></path><path d="M3 16.2V21m0 0h4.8M3 21l6-6"></path><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"></path><path d="M3 7.8V3m0 0h4.8M3 3l6 6"></path></svg>
- title: Clean & consistent
details: Designed with a strict set of design rules for consistency in style and readability.
icon: |