Skip to content

Commit a384b4f

Browse files
karsa-mistmereericfennisCopilot
authored
feat(docs): add dark mode icon support for framework select (#4167)
* Update images * Adjust color * update accessebility * Add matrix hero * Add typescript documentation * Add basics section to vue pages * Add svelte docs * Fix dynamic sidebar * Add animation? * Some adjustments * Adjust animation * Updates docs * Add scaledown animation * Add docs for vue types * Fix layout accessibility page * fix framework select * adjust easing home animation * Write docs for Vue * Adjust animation home * Adjust home hero animation * Finish svelte docs * Add solid pages * remove spiral animation component * Add group icons * Added solid docs * update preact docs * Adjust examples preact docs * Add snackplayer * Get new editor * Save this * Add examples * Adjust styling * setup custom sandpack * Add script * Format files * Make sandpack plugin work * migrate react docs * Fix svelte and solid examples * Migrate to solid packages * Add darkmode package logos * Fix bug in selector * migrate vue examples * migrate advanced vue items * migrate preact and svelte examples * Add astro docs * adding more docs on guide for lucide library * Fix home animation * Cleanup * Added resources page, with more details and content * Add hero badge for Version 1 * Fix vercel json * Update missing paths * Fix build? * Replace lucide-vue-next * Fix build * Add some docs * update markdown * Setup angular docs * Add basic angular docs * Adjust code examples * Update title and descriptions * Update accessibility link * Update title and description * Add og image * Fix alignment * Add migration guides * Adjust version 1 markdown file * Add migration guide to the main list * Minor fixes * Update docs * Apply feedback * Select icons * Add pointer events none * Fix package links homepage * Format code * Fix types * Fix focus * Fix build * Fix focus * Apply feedback * Adjust imports * Adjust imports * Fix search * Apply feedback * Fix import in font docs * Small fixes * docs(guide): added easter egg icon. stay tuned, guys 😉 * Add llm txt plugin * Adjust logo top * docs(version-1): upgraded @lucide/angular guide for v1 website (#4144) * docs(guide/angular): rewrite some angular documentation * docs(guide/angular): extens angular guide with combining icons & icon provider guides * docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho * docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences * docs(guide/angular): context provider => provideLucideConfig * Update docs/guide/angular/migration.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Update docs/guide/angular/advanced/combining-icons.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(guide/angular): rework a11y for better flow & pacing * docs(guide/angular): salvage original phrase, it has better flow * docs(guide/angular): some more a11y nitpicking * docs(guide/angular): reduce llm fatigue * docs(guides/angular): fix app component selector * docs(guides/angular): fix angular sandpacks * Add sandpack angular to improve tree-shakable stack * Update docs/guide/angular/getting-started.md * docs(guides/angular): fix user import in combinding icons guide * docs(guides/angular): fix nested SVG phrasing * Update docs/guide/angular/advanced/with-lucide-lab.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/angular/advanced/filled-icons.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(guides/angular): fix createLucideIcon guide * docs(guides/angular): upgrade all relevant angular sandpack demos --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix(docs): add autogenerated OG images to gitignore * fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes * Fix build * Add next tag to all installation guides * Add top bar notification * Minor fixes * Update text * Add todos * Update og image * Adjust install command * Color top bar * fix(docs): ignore all OG images, expect general.png * fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment * Update docs/.vitepress/theme/components/base/LayoutTop.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/react/advanced/dynamic-icon-component.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update CONTRIBUTING.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/.vitepress/sidebar/resources.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix code example * fix(docs): version 1 => Version 1 * feat(docs): add angular to new features in v1 * Fix next line issue * feat(docs): fix typo (code example_s_) * Fix deadlink * feat(docs): fix some more typos and irky grammar * feat(docs): fix lowercase lucide in sidebar 😅 * feat(docs): add dark mode icon support for framework select * fix(docs): revert incorrect merge --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
1 parent e3db10a commit a384b4f

3 files changed

Lines changed: 53 additions & 32 deletions

File tree

‎docs/.vitepress/theme/components/base/Select.vue‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue';
3-
import {
4-
Listbox,
5-
ListboxLabel,
6-
ListboxButton,
7-
ListboxOptions,
8-
ListboxOption,
9-
} from '@headlessui/vue';
2+
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
103
import Icon from '@lucide/vue/src/Icon';
114
import { chevronsUpDown, check } from '../../../data/iconNodes';
5+
import SelectIcon from './SelectIcon.vue';
126
137
defineProps<{
148
id?: string;
15-
items?: { name: string; icon: string }[];
9+
items?: { name: string; route: string; icon: string; iconDark?: string }[];
1610
}>();
1711
18-
const selected = defineModel<{ name: string; icon: string }>();
12+
const selected = defineModel<{ name: string; icon: string; iconDark?: string }>();
1913
</script>
2014

2115
<template>
@@ -25,12 +19,7 @@ const selected = defineModel<{ name: string; icon: string }>();
2519
class="select-button"
2620
:id="id"
2721
>
28-
<img
29-
:src="selected.icon"
30-
:class="{ 'select-item-icon': true }"
31-
:alt="`${selected.name} logo`"
32-
loading="lazy"
33-
/>
22+
<SelectIcon :item="selected" />
3423
<span class="select-text">{{ selected.name }}</span>
3524
<span class="select-icon">
3625
<Icon
@@ -55,12 +44,7 @@ const selected = defineModel<{ name: string; icon: string }>();
5544
as="template"
5645
>
5746
<li :class="['select-option', { active, selected }]">
58-
<img
59-
:src="item.icon"
60-
:class="{ 'select-item-icon': true }"
61-
:alt="`${item.name} logo`"
62-
loading="lazy"
63-
/>
47+
<SelectIcon :item="item" />
6448
<span :class="['option-text', { selected }]">{{ item.name }}</span>
6549
<span
6650
v-if="selected"
@@ -126,12 +110,6 @@ const selected = defineModel<{ name: string; icon: string }>();
126110
padding-right: 0.5rem;
127111
}
128112
129-
.select-item-icon {
130-
object-fit: contain;
131-
width: 24px;
132-
height: 24px;
133-
}
134-
135113
.chevron-icon {
136114
height: 1.25rem;
137115
width: 1.25rem;

‎docs/.vitepress/theme/components/base/SelectIcon.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts">
2+
const { item } = defineProps<{
3+
item: {
4+
name: string;
5+
icon: string;
6+
iconDark?: string;
7+
};
8+
}>();
9+
</script>
10+
11+
<template>
12+
<img
13+
:src="item.icon"
14+
:class="{ 'select-item-icon': true, light: item.iconDark }"
15+
:alt="`${item.name} logo`"
16+
loading="lazy"
17+
/>
18+
<img
19+
v-if="item.iconDark"
20+
:src="item.iconDark"
21+
:alt="`${item.name} logo`"
22+
class="select-item-icon dark"
23+
/>
24+
</template>
25+
26+
<style scoped>
27+
.select-item-icon {
28+
object-fit: contain;
29+
width: 24px;
30+
height: 24px;
31+
}
32+
33+
html.dark .select-item-icon.light {
34+
display: none;
35+
}
36+
37+
html:not(.dark) .select-item-icon.dark {
38+
display: none;
39+
}
40+
</style>

‎docs/.vitepress/theme/components/guide/FrameworkSelect.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ const frameworks = [
2323
icon: '/framework-logos/react-native.svg',
2424
route: '/guide/react-native/',
2525
},
26-
{ name: 'Astro', icon: '/framework-logos/astro-dark.svg', route: '/guide/astro/' },
26+
{
27+
name: 'Astro',
28+
icon: '/framework-logos/astro.svg',
29+
iconDark: '/framework-logos/astro-dark.svg',
30+
route: '/guide/astro/',
31+
},
2732
{ name: 'Static', icon: '/framework-logos/svg.svg', route: '/guide/static/' },
2833
];
2934
@@ -43,13 +48,11 @@ const selected = computed(() => {
4348
return current || fallbackFramework.value;
4449
});
4550
46-
function onSelectFramework(item: { name: string; icon: string; route: string }) {
51+
function onSelectFramework(item: { name: string; icon: string; iconDark?: string; route: string }) {
4752
fallbackFramework.value = item;
4853
if (item.route !== router.route.path) {
4954
const likeRoute = router.route.path.replace(selected.value.route, item.route);
5055
51-
console.log(likeRoute);
52-
5356
const hasRoute = sidebar[item.route]?.some((section) =>
5457
section?.items?.some(({ link }) => link === likeRoute),
5558
);

0 commit comments

Comments
 (0)
⚡