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

A lot off fixes!

Browse Source
This commit is contained in:
Eric Fennis
2023-05-03 22:11:49 +02:00
parent ef2dcdd91a
commit 21e3c0fbb5
76 changed files with 872 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+9
View File
@@ -21,3 +21,12 @@ packages/**/LICENSE
categories.json
tags.json
.vercel
# docs
docs/.vitepress/cache
docs/.vitepress/dist
docs/.vitepress/.temp
docs/.vitepress/data/iconNodes
docs/.vitepress/data/iconMetaData.ts
docs/.vercel
docs/.nitro
docs/.gitignore
-8
View File
@@ -1,8 +0,0 @@
node_modules
.vitepress/cache
.vitepress/dist
.vitepress/.temp
.vercel
.nitro
iconNodes
iconMetaData.ts
docs/.vitepress/api/icon-nodes/index.get.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { eventHandler, getQuery, setResponseHeader } from 'h3'
import * as iconNodes from '../../../iconNodes'
import * as iconNodes from '../../data/iconNodes'
import { kebabCase } from 'lodash-es'
export default eventHandler((event) => {
docs/.vitepress/api/icons/[iconName].get.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { eventHandler, getQuery, setResponseHeader, createError } from 'h3'
import * as iconNodes from '../../../iconNodes'
import * as iconNodes from '../../data/iconNodes'
import { camelCase } from 'lodash-es'
import createLucideIcon from 'lucide-react/src/createLucideIcon'
import { renderToString } from 'react-dom/server'
docs/.vitepress/api/tags/index.get.ts
+2 -3
View File
@@ -1,8 +1,7 @@
import { eventHandler, getQuery, setResponseHeader } from 'h3'
import * as iconMetaData from '../../../iconMetaData'
import { eventHandler, setResponseHeader } from 'h3'
import * as iconMetaData from '../../data/iconMetaData'
import { kebabCase } from 'lodash-es'
export default eventHandler((event) => {
setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
docs/.vitepress/config.ts
+6 -129
View File
@@ -1,13 +1,6 @@
import fs from 'fs'
import path from 'path'
import path from 'path';
import { defineConfig } from 'vitepress'
export function getAllCategoryFiles() {
const fileNames = fs.readdirSync(path.join('../lucide/categories')).filter((file) => path.extname(file) === '.json');
return fileNames
.map((fileName) => path.basename(fileName, '.json'));
}
import sidebar from './sidebar';
// https://vitepress.dev/reference/site-config
export default defineConfig({
@@ -15,138 +8,22 @@ export default defineConfig({
title: "Lucide",
description: "Beautiful & consistent icon toolkit made by the community.",
outDir: '.vercel/output/static',
vite: {
plugins: []
},
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
logo: {
light: '/logo.light.svg',
dark: '/logo.dark.svg'
},
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Icons', link: '/icons/index.md' },
{ text: 'Guide', link: '/guide/' },
{ text: 'Packages', link: '/packages' },
{ text: 'License', link: '/license' },
],
sidebar: {
'guide':[
{
text: 'Introduction',
items: [
{ text: 'What is lucide?', link: '/guide/' },
{ 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: [
{
text: 'Lucide',
link: '/guide/packages/lucide'
},
{
text: 'Lucide React',
link: '/guide/packages/lucide-react'
},
{
text: 'Lucide React Native',
link: '/guide/packages/lucide-react-native'
},
{
text: 'Lucide Vue',
link: '/guide/packages/lucide-vue'
},
{
text: 'Lucide Vue Next (Vue 3)',
link: '/guide/packages/lucide-vue-next'
},
{
text: 'Lucide Svelte',
link: '/guide/packages/lucide-svelte'
},
{
text: 'Lucide Solid',
link: '/guide/packages/lucide-solid'
},
{
text: 'Lucide Preact',
link: '/guide/packages/lucide-preact'
},
{
text: 'Lucide Angular',
link: '/guide/packages/lucide-angular'
},
{
text: 'Lucide Static',
link: '/guide/packages/lucide-static'
},
{
text: 'Lucide Flutter',
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: '/' },
// { text: 'Categorized', link: '/icons/categorized' },
// {
// text: 'Categories',
// items: [
// ...(getAllCategoryFiles().map((category) => ({ text: category, link: `/icons/category/${category}` })))
// ]
// }
],
},
sidebar,
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
{ icon: 'github', link: 'https://github.com/lucide-icons/lucide' },
{ icon: 'discord', link: 'https://discord.gg/EH6nSts' }
]
}
})
site/src/data/packageData.json → docs/.vitepress/data/packageData.json
View File
site/src/data/packageData.thirdParty.json → docs/.vitepress/data/packageData.thirdParty.json
View File
docs/.vitepress/lib/categories.ts
+10 -3
View File
@@ -1,6 +1,6 @@
import fs from "fs";
import path from "path";
import {Category, IconEntity} from "../types";
import {Category, IconEntity} from "../theme/types";
import {getAllData} from "./icons";
const directory = path.join(process.cwd(), "../categories");
@@ -8,8 +8,15 @@ const directory = path.join(process.cwd(), "../categories");
export function getAllCategoryFiles() {
const fileNames = fs.readdirSync(directory).filter((file) => path.extname(file) === '.json');
return fileNames
.map((fileName) => path.basename(fileName, '.json'));
return fileNames.map((fileName) => {
const name = path.basename(fileName, '.json')
const fileContent = fs.readFileSync(path.join(directory, fileName), 'utf8')
return {
name,
...JSON.parse(fileContent)
}
});
}
export async function getData(name: string, icons: IconEntity[]): Promise<Category> {
docs/.vitepress/lib/createCodeExamples.ts
+31 -32
View File
@@ -17,9 +17,7 @@ type CodeExampleType = {
}[],
}[]
const getIconCodes = (name: string): CodeExampleType => {
const pascalCase = startCase(camelCase(name)).replace(/\s/g, '')
const getIconCodes = (): CodeExampleType => {
return [
{
lang: 'html',
@@ -27,7 +25,7 @@ const getIconCodes = (name: string): CodeExampleType => {
codes: [
{
language: 'html',
code: `<i icon-name="${name}"></i>
code: `<i data-lucide-name="Name"></i>
`,
},
],
@@ -38,17 +36,17 @@ const getIconCodes = (name: string): CodeExampleType => {
codes: [
{
language: 'tsx',
code: `import { ${pascalCase} } from 'lucide-react';
code: `import { PascalCase } from 'lucide-react';
const App = () => {
return (
<${pascalCase}/>
<PascalCase strokeWidth={2} size={32} color="#000"/>
);
};
export default App;
`,
metastring: '{1,4}',
},
],
},
@@ -58,15 +56,15 @@ export default App;
codes: [
{
language: 'vue',
code: `<template>
<${pascalCase} />
</template>
<script setup>
import { ${pascalCase} } from 'lucide-vue-next';
code: `<script setup>
import { PascalCase } from 'lucide-vue-next';
</script>
<template>
<PascalCase />
</template>
`,
metastring: '{2,6}',
},
],
},
@@ -75,14 +73,14 @@ import { ${pascalCase} } from 'lucide-vue-next';
title: 'Svelte',
codes: [
{
language: 'vue',
language: 'svelte',
code: `<script>
import { ${pascalCase} } from 'lucide-svelte';
import { PascalCase } from 'lucide-svelte';
</script>
<${pascalCase}/>
<PascalCase />
`,
metastring: '{2,5}',
},
],
},
@@ -92,17 +90,17 @@ import { ${pascalCase} } from 'lucide-svelte';
codes: [
{
language: 'tsx',
code: `import { ${pascalCase} } from 'lucide-preact';
code: `import { PascalCase } from 'lucide-preact';
const App = () => {
return (
<${pascalCase}/>
<PascalCase />
);
};
export default App;
`,
metastring: '{1,4}',
},
],
},
@@ -112,17 +110,17 @@ export default App;
codes: [
{
language: 'tsx',
code: `import { ${pascalCase} } from 'lucide-solid';
code: `import { PascalCase } from 'lucide-solid';
const App = () => {
return (
<${pascalCase}/>
<PascalCase />
);
};
export default App;
`,
metastring: '{1,4}',
},
],
},
@@ -133,15 +131,16 @@ export default App;
{
language: 'tsx',
code: `// app.module.ts
import { LucideAngularModule, ${pascalCase} } from 'lucide-angular';\r
import { LucideAngularModule, PascalCase } from 'lucide-angular';
@NgModule({
imports: [
LucideAngularModule.pick({ ${pascalCase} })
LucideAngularModule.pick({ PascalCase })
],
})
// app.component.html
<lucide-icon name="${name}"></lucide-icon>
<lucide-icon name="Name"></lucide-icon>
`,
},
],
@@ -153,10 +152,10 @@ import { LucideAngularModule, ${pascalCase} } from 'lucide-angular';\r
{
language: 'html',
code: `<style>
@import ('~lucide-static/font/Lucide.css')
@import ('~lucide-static/font/Lucide.css');
</style>
<div class="icon-${name}"></div>
<div class="icon-Name"></div>
`,
},
],
@@ -167,7 +166,7 @@ import { LucideAngularModule, ${pascalCase} } from 'lucide-angular';\r
codes: [
{
language: 'dart',
code: `Icon(LucideIcons.${name});
code: `Icon(LucideIcons.Name);
`,
},
],
@@ -200,8 +199,8 @@ const highLightCode = async (code: string, lang: string, active?: boolean) => {
}
export default async function createCodeExamples(name: string) {
const codes = getIconCodes(name);
export default async function createCodeExamples() {
const codes = getIconCodes();
const codeExamplePromises = codes.map(async (codeTemplate, index) => {
const { title, lang, codes } = codeTemplate;
docs/.vitepress/lib/fetchAllContributors.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import crypto from 'crypto';
import fs from 'fs';
import path from 'path';
import { Contributor } from '../types';
import { Contributor } from '../theme/types';
import fetch, { Headers } from 'node-fetch'
const IGNORE_COMMIT_MESSAGES = ['fork', 'optimize'];
docs/.vitepress/lib/fetchIconNodes.tsx
-23
View File
@@ -1,23 +0,0 @@
import NextCache from './nextCache';
import {getAllData, GetDataOptions} from './icons';
export type IconNode = [string, object, IconNode[]];
export type IconNodes = {[iconName: string]: IconNode};
export function fetchIconNodes(writeCache = true, options?: GetDataOptions): Promise<IconNodes> {
if (options?.withChildKeys) {
return NextCache.resolve('api-icon-nodes-with-keys', async () => {
return (await getAllData({ withChildKeys : true})).reduce((acc, icon) => {
acc[icon.name] = icon.iconNode
return acc;
}, {});
}, writeCache);
}
return NextCache.resolve('api-icon-nodes', async () => {
return (await getAllData()).reduce((acc, icon) => {
acc[icon.name] = icon.iconNode
return acc;
}, {});
}, writeCache);
}
docs/.vitepress/lib/fetchPackages.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { promises as fs, constants } from 'fs';
import path from 'path';
import yaml from 'js-yaml'
import { PackageItem } from '../types';
import { PackageItem } from '../theme/types';
const fileExist = (filePath) => fs.access(filePath, constants.F_OK).then(() => true).catch(() => false)
docs/.vitepress/lib/getFallbackZip.tsx
+4 -3
View File
@@ -1,12 +1,13 @@
import { createLucideIcon, LucideProps } from "lucide-react"
import { IconEntity } from "src/types"
import { createLucideIcon } from "lucide-react/src/lucide-react"
import { type LucideProps, type IconNode } from "lucide-react/src/createLucideIcon"
import { IconEntity } from "../theme/types"
import { renderToStaticMarkup } from 'react-dom/server';
import { IconContent } from "./generateZip";
const getFallbackZip = (icons: IconEntity[], params: LucideProps) => {
return icons
.map<IconContent>((icon) => {
const Icon = createLucideIcon(icon.name, icon.iconNode)
const Icon = createLucideIcon(icon.name, icon.iconNode as IconNode)
const src = renderToStaticMarkup(<Icon {...params} />)
return [icon.name, src]
})
docs/.vitepress/lib/icons.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import fs from "fs";
import path from "path";
import { parseSync } from "svgson";
import { IconNode } from "../../../packages/lucide-react/src/createLucideIcon";
import { IconEntity } from "../types";
import { IconEntity } from "../theme/types";
import { getContributors } from "./fetchAllContributors";
import { generateHashedKey } from "./helpers";
docs/.vitepress/lib/key.js
-36
View File
@@ -1,36 +0,0 @@
import { useEffect, useState } from "react";
const isCtrl = (e) => e.metaKey || e.ctrlKey;
// https://keycode.info
export const useKeyBindings = (
initialKeyBindings = {},
eventListener = "keydown"
) => {
const [keyBindings] = useState(initialKeyBindings);
useEffect(() => {
// eslint-disable-next-line no-undef
document.addEventListener(
eventListener,
(event) => {
const { code } = event;
const keyBinding = keyBindings[code];
if (keyBinding === undefined) return;
const condition = keyBinding.ctrl ? isCtrl(event) : true;
if (!condition) return;
if (event.target.type != "text" || code == "Escape") {
event.preventDefault();
keyBinding.fn(event);
}
},
false
);
return () =>
Object.keys(keyBindings).forEach((keyBinding) =>
// eslint-disable-next-line no-undef
document.removeEventListener(eventListener, keyBindings[keyBinding])
);
}, []);
};
docs/.vitepress/sidebar.ts
+117
View File
@@ -0,0 +1,117 @@
import { DefaultTheme, UserConfig } from "vitepress"
const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
'guide':[
{
text: 'Introduction',
items: [
{ text: 'What is lucide?', link: '/guide/' },
{ text: 'Installation', link: '/guide/installation' }
]
},
// {
// text: '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: [
{
text: 'Lucide',
link: '/guide/packages/lucide'
},
{
text: 'Lucide React',
link: '/guide/packages/lucide-react'
},
{
text: 'Lucide React Native',
link: '/guide/packages/lucide-react-native'
},
{
text: 'Lucide Vue',
link: '/guide/packages/lucide-vue'
},
{
text: 'Lucide Vue Next (Vue 3)',
link: '/guide/packages/lucide-vue-next'
},
{
text: 'Lucide Svelte',
link: '/guide/packages/lucide-svelte'
},
{
text: 'Lucide Solid',
link: '/guide/packages/lucide-solid'
},
{
text: 'Lucide Preact',
link: '/guide/packages/lucide-preact'
},
{
text: 'Lucide Angular',
link: '/guide/packages/lucide-angular'
},
{
text: 'Lucide Static',
link: '/guide/packages/lucide-static'
},
{
text: 'Lucide Flutter',
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: '/' },
// { text: 'Categorized', link: '/icons/categorized' },
// {
// text: 'Categories',
// items: [
// ...(getAllCategoryFiles().map((category) => ({ text: category, link: `/icons/category/${category}` })))
// ]
// }
],
}
export default sidebar
docs/.vitepress/components/PageContainer.vue → docs/.vitepress/theme/components/PageContainer.vue
View File
docs/.vitepress/components/Badge.vue → docs/.vitepress/theme/components/base/Badge.vue
+4 -2
View File
@@ -25,7 +25,7 @@ const component = computed(() => props.href ? 'a' : 'div')
</template>
<style>
.badge {
.badge, a.badge {
display: block;
border: 1px solid transparent;
text-align: center;
@@ -35,15 +35,17 @@ const component = computed(() => props.href ? 'a' : 'div')
transition: color 0.25s, border-color 0.25s, background-color 0.25s;
border-radius: 6px;
background-color: var(--vp-c-bg-alt);
color: var(--vp-c-text-1);
/* width: 56px;
height: 56px; */
font-size: 16px;
}
.badge:hover {
.badge:hover, a.badge:hover {
border-color: var(--vp-button-alt-hover-border);
color: var(--vp-button-alt-hover-text);
background-color: var(--vp-button-alt-hover-bg);
text-decoration: none;
}
.badge:active {
docs/.vitepress/components/ButtonMenu.vue → docs/.vitepress/theme/components/base/ButtonMenu.vue
+37 -5
View File
@@ -3,23 +3,49 @@ import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vu
import { computed, ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
import { chevronUp } from '../../iconNodes'
import { chevronUp } from '../../../data/iconNodes'
const props = defineProps<{
options: {
text: string
onClick?: () => void
}[],
callOptionOnClick?: boolean
buttonClass?: string
}>()
const emit = defineEmits(['click', 'optionClick'])
const buttonRef = ref(null)
const selectedOption = ref(props.options[0].text)
const selectionOptionAction = computed(() => props.options.find(option => option.text === selectedOption.value).onClick)
function onClick(event) {
selectionOptionAction.value()
console.log(event);
emit('click', event)
}
function onOptionClick(event, option) {
console.log(event, option);
if(!props.callOptionOnClick) {
return
}
option.onClick()
emit('optionClick', event)
}
const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
</script>
@@ -30,9 +56,11 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
<VPButton
v-bind="$attrs"
:text="selectedOption"
@click="selectionOptionAction"
@click="onClick"
theme="alt"
class="main-button"
:class="[props.buttonClass]"
ref="buttonRef"
/>
<ListboxButton :as="VPButton" :text="''" theme="alt" class="arrow-up-button"/>
</div>
@@ -42,10 +70,10 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
class="menu-item"
v-for="option in options"
:value="option.text"
@click="onOptionClick($event, option)"
>
{{ option.text }}
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
@@ -117,10 +145,14 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
}
.arrow-up-button::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cpolyline points='18 15 12 9 6 15' /%3E%3C/svg%3E%0A");
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cpolyline points='18 15 12 9 6 15' /%3E%3C/svg%3E%0A");
width: 20px;
height: 28px;
margin: auto;
display: block;
}
.dark .arrow-up-button::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cpolyline points='18 15 12 9 6 15' /%3E%3C/svg%3E%0A");
}
</style>
docs/.vitepress/components/CodeGroup.vue → docs/.vitepress/theme/components/base/CodeGroup.vue
View File
docs/.vitepress/components/ColorPicker.vue → docs/.vitepress/theme/components/base/ColorPicker.vue
View File
docs/.vitepress/components/EndOfPage.vue → docs/.vitepress/theme/components/base/EndOfPage.vue
View File
docs/.vitepress/components/FakeInput.vue → docs/.vitepress/theme/components/base/FakeInput.vue
+1 -2
View File
@@ -1,7 +1,6 @@
<script setup>
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
import { search } from '../../iconNodes'
import { computed } from 'vue';
import { search } from '../../../data/iconNodes'
const SearchIcon = createLucideIcon('search', search)
</script>
docs/.vitepress/components/IconButton.vue → docs/.vitepress/theme/components/base/IconButton.vue
View File
docs/.vitepress/components/Input.vue → docs/.vitepress/theme/components/base/Input.vue
View File
docs/.vitepress/components/InputField.vue → docs/.vitepress/theme/components/base/InputField.vue
View File
docs/.vitepress/components/InputSearch.vue → docs/.vitepress/theme/components/base/InputSearch.vue
+1 -1
View File
@@ -8,7 +8,7 @@ export default {
import { computed, ref } from 'vue'
import Input from './Input.vue'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
import { search } from '../../iconNodes'
import { search } from '../../../data/iconNodes'
const SearchIcon = createLucideIcon('search', search)
docs/.vitepress/components/LucideIcon.vue → docs/.vitepress/theme/components/base/LucideIcon.vue
-1
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
import type { IconEntity } from '../types'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
export type IconNode = [elementName: string, attrs: Record<string, string>][]
docs/.vitepress/components/RangeSlider.vue → docs/.vitepress/theme/components/base/RangeSlider.vue
View File
docs/.vitepress/components/HomeContainer.vue → docs/.vitepress/theme/components/home/HomeContainer.vue
View File
docs/.vitepress/components/HomeHeroIconsCard.data.ts → docs/.vitepress/theme/components/home/HomeHeroIconsCard.data.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { getAllData } from '../lib/icons'
import { getAllData } from '../../../lib/icons'
const getRandomItem = <Item>(items: Item[]): Item => items[Math.floor(Math.random()*items.length)];
docs/.vitepress/components/HomeHeroIconsCard.vue → docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
+3 -3
View File
@@ -1,11 +1,11 @@
<script setup lang="ts">
import { ref, onMounted, shallowRef, onBeforeUnmount} from 'vue';
import { data } from './HomeHeroIconsCard.data'
import IconButton from './IconButton.vue';
import LucideIcon from './LucideIcon.vue'
import IconButton from '../base/IconButton.vue';
import LucideIcon from '../base/LucideIcon.vue'
import { useRouter } from 'vitepress';
import { random } from 'lodash-es'
import FakeInput from './FakeInput.vue'
import FakeInput from '../base/FakeInput.vue'
const { go } = useRouter()
const intervalTime = shallowRef()
docs/.vitepress/components/HomeIconCustomizer.vue → docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
+13 -14
View File
@@ -1,15 +1,14 @@
<script setup lang="ts">
import { syncRef, useCssVar } from '@vueuse/core'
import HomeContainer from './HomeContainer.vue'
import { rotateCw } from '../../iconNodes'
import { rotateCw } from '../../../data/iconNodes'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
import RangeSlider from './RangeSlider.vue'
import IconButton from './IconButton.vue'
import InputField from './InputField.vue'
import ColorPicker from './ColorPicker.vue'
import RangeSlider from '../base/RangeSlider.vue'
import InputField from '../base/InputField.vue'
import ColorPicker from '../base/ColorPicker.vue'
import HomeIconCustomizerIcons from './HomeIconCustomizerIcons.vue'
import { computed, ref } from 'vue'
import { ref } from 'vue'
const iconContainer = ref<HTMLElement | null>()
const color = ref('currentColor')
@@ -44,21 +43,21 @@ syncRef(color, colorCssVar)
syncRef(strokeWidth, strokeWidthCssVar)
syncRef(size, sizeCssVar)
const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
// TODO Add Reset button
// const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
// function resetStyle () {
// color.value = 'currentColor'
// strokeWidth.value = 2
// size.value = 24
// }
function resetStyle () {
color.value = 'currentColor'
strokeWidth.value = 2
size.value = 24
}
</script>
<template>
<HomeContainer>
<div class="card">
<div class="card-column">
<h2 class="title">
Style as you please
</h2>
docs/.vitepress/components/HomeIconCustomizerIcons.vue → docs/.vitepress/theme/components/home/HomeIconCustomizerIcons.vue
+1 -4
View File
@@ -1,8 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import { data } from './HomeHeroIconsCard.data'
import IconButton from './IconButton.vue';
import LucideIcon from './LucideIcon.vue'
import LucideIcon from '../base/LucideIcon.vue'
const getInitialItems = () => data.icons.slice(0, 64)
const items = ref(getInitialItems())
@@ -44,8 +43,6 @@ const items = ref(getInitialItems())
display: flex;
align-items: center;
justify-content: center;
/* width: 56px;
height: 56px; */
background: var(--vp-c-bg);
}
docs/.vitepress/components/HomePackagesSection.data.ts → docs/.vitepress/theme/components/home/HomePackagesSection.data.ts
View File
docs/.vitepress/components/HomePackagesSection.vue → docs/.vitepress/theme/components/home/HomePackagesSection.vue
View File
docs/.vitepress/components/CategoryList.data.ts → docs/.vitepress/theme/components/icons/CategoryList.data.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import fs from 'fs'
import path from 'path'
import { getAllData } from '../lib/icons';
import { getAllData } from '../../../lib/icons';
export function getAllCategoryFiles() {
const fileNames = fs.readdirSync(path.join('../categories')).filter((file) => path.extname(file) === '.json');
docs/.vitepress/components/CategoryList.vue → docs/.vitepress/theme/components/icons/CategoryList.vue
+1 -6
View File
@@ -1,11 +1,9 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useData } from 'vitepress'
import VPDocOutlineItem from 'vitepress/dist/client/theme-default/components/VPDocOutlineItem.vue'
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
import { isActive } from 'vitepress/dist/client/theme-default/support/utils'
import { onContentUpdated } from 'vitepress'
import { useActiveAnchor } from '../composables/useActiveAnchor'
import { useActiveAnchor } from '../../composables/useActiveAnchor'
import { data } from './CategoryList.data'
import CategoryListItem from './CategoryListItem.vue'
@@ -54,9 +52,6 @@ useActiveAnchor(container, marker)
</template>
<style scoped>
.category-list {
/* margin-top: -24px; */
}
.sidebar-title {
font-weight: 500;
color: var(--vp-c-text-2);
docs/.vitepress/components/CategoryListItem.vue → docs/.vitepress/theme/components/icons/CategoryListItem.vue
+1 -2
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { useCategoryView } from '../composables/useCategoryView'
import { useCategoryView } from '../../composables/useCategoryView'
interface Header {
level: number
docs/.vitepress/theme/components/icons/CopyCodeButton.vue
+182
View File
@@ -0,0 +1,182 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { startCase, camelCase } from 'lodash-es'
import ButtonMenu from '../base/ButtonMenu.vue'
import { useIconStyleContext } from '../../composables/useIconStyle';
const props = defineProps<{
name: string
}>()
const { size, color, strokeWidth } = useIconStyleContext()
const animate = ref(false)
const componentName = computed(() => {
return startCase(camelCase(props.name)).replace(/\s/g, '')
})
function copyJSX() {
let attrs = ['']
if (size.value && size.value !== 24) {
attrs.push(`size={${size.value}}`)
}
if (color.value && color.value !== 'currentColor') {
attrs.push(`color="${color.value}"`)
}
if (strokeWidth.value && strokeWidth.value !== 2) {
attrs.push(`strokeWidth={${strokeWidth.value}}`)
}
const code = `<${componentName.value}${attrs.join(' ')} />`
navigator.clipboard.writeText(code)
}
function copyVue() {
let attrs = ['']
if (size.value && size.value !== 24) {
attrs.push(`:size="${size.value}"`)
}
if (color.value && color.value !== 'currentColor') {
attrs.push(`color="${color.value}"`)
}
if (strokeWidth.value && strokeWidth.value !== 2) {
attrs.push(`:stroke-width="${strokeWidth.value}"`)
}
const code = `<${componentName.value}${attrs.join(' ')} />`
navigator.clipboard.writeText(code)
}
function confetti(e) {
animate.value = true;
setTimeout(function () {
animate.value = false;
}, 1000);
}
</script>
<template>
<ButtonMenu
:buttonClass="`confetti-button ${animate ? 'animate' : ''}`"
callOptionOnClick
@click="confetti"
@optionClick="confetti"
:options="[
{ text: 'Copy JSX' , onClick: copyJSX },
{ text: 'Copy Vue' , onClick: copyVue },
{ text: 'Copy Svelte' , onClick: copyJSX },
]"
/>
</template>
<style>
.confetti-button {
cursor: pointer;
position: relative;
--confetti-color: var(--vp-c-brand);
--text-color: 0 0 0;
}
.dark .confetti-button {
--confetti-color: var(--vp-c-brand-dark);
--text-color: 255 255 255;
}
.confetti-button:before,
.confetti-button:after {
position: absolute;
content: "";
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
.confetti-button:before {
content: "Copied!";
letter-spacing: 1px;
font-weight: bold;
transform: rotate(-10deg);
color: rgb(var(--text-color) / 1);
display: none;
top: -80%;
background-image: radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, transparent 20%, var(--confetti-color) 20%, transparent 30%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, transparent 10%, var(--confetti-color) 15%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
}
.confetti-button:after {
display: none;
bottom: -75%;
background-image: radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, transparent 10%, var(--confetti-color) 15%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.confetti-button.animate:before {
display: block;
animation: topBubbles ease-in-out 1s forwards;
}
.confetti-button.animate:after {
display: block;
animation: bottomBubbles ease-in-out 1s forwards;
}
@keyframes topBubbles {
0% {
color: rgb(var(--text-color) / 0);
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
40% 90%, 55% 90%, 70% 90%;
}
30% {
color: rgb(var(--text-color) / 1);
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
color: rgb(var(--text-color) / 0);
}
}
@keyframes bottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
</style>
docs/.vitepress/theme/components/icons/CopySVGButton.vue
+186
View File
@@ -0,0 +1,186 @@
<script setup lang="ts">
import { ref } from 'vue';
import ButtonMenu from '../base/ButtonMenu.vue'
const allowedAttrs = [
'xmlns',
'width',
'height',
'viewBox',
'fill',
'stroke',
'stroke-width',
'stroke-linecap',
'stroke-linejoin',
'class',
]
const animate = ref(false)
function getSVGIcon() {
const svg = document.querySelector('#previewer svg')
if (!svg) return
const clonedSvg = svg.cloneNode(true) as SVGElement
// Filter out attributes that are not allowed in SVGs
for (const attr of Array.from(clonedSvg.attributes)) {
if (!allowedAttrs.includes(attr.name)) {
clonedSvg.removeAttribute(attr.name)
}
}
const svgString = new XMLSerializer().serializeToString(clonedSvg)
return svgString
}
function copySVG() {
const svgString = getSVGIcon()
navigator.clipboard.writeText(svgString)
}
function copyDataUrl() {
const svgString = getSVGIcon()
// Create SVG data url
const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
navigator.clipboard.writeText(dataUrl)
}
function copyPNG() {
const svgString = getSVGIcon()
// Create SVG data url
const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
navigator.clipboard.writeText(dataUrl)
}
function confetti(e) {
animate.value = true;
setTimeout(function () {
animate.value = false;
}, 1000);
}
</script>
<template>
<ButtonMenu
:buttonClass="`confetti-button ${animate ? 'animate' : ''}`"
callOptionOnClick
@click="confetti"
@optionClick="confetti"
:options="[
{ text: 'Copy SVG' , onClick: copySVG },
{ text: 'Copy Data URL' , onClick: copyDataUrl },
// { text: 'Copy PNG' , onClick: () => {} },
]"
/>
</template>
<style>
.confetti-button {
cursor: pointer;
position: relative;
--confetti-color: var(--vp-c-brand);
--text-color: 0 0 0;
}
.dark .confetti-button {
--confetti-color: var(--vp-c-brand-dark);
--text-color: 255 255 255;
}
.confetti-button:before,
.confetti-button:after {
position: absolute;
content: "";
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
.confetti-button:before {
content: "Copied!";
letter-spacing: 1px;
font-weight: bold;
transform: rotate(-10deg);
color: rgb(var(--text-color) / 1);
display: none;
top: -80%;
background-image: radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, transparent 20%, var(--confetti-color) 20%, transparent 30%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, transparent 10%, var(--confetti-color) 15%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
}
.confetti-button:after {
display: none;
bottom: -75%;
background-image: radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, transparent 10%, var(--confetti-color) 15%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.confetti-button.animate:before {
display: block;
animation: topBubbles ease-in-out 1s forwards;
}
.confetti-button.animate:after {
display: block;
animation: bottomBubbles ease-in-out 1s forwards;
}
@keyframes topBubbles {
0% {
color: rgb(var(--text-color) / 0);
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
40% 90%, 55% 90%, 70% 90%;
}
30% {
color: rgb(var(--text-color) / 1);
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
color: rgb(var(--text-color) / 0);
}
}
@keyframes bottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
</style>
docs/.vitepress/components/IconDetail.vue → docs/.vitepress/theme/components/icons/IconDetail.vue
-2
View File
@@ -1,9 +1,7 @@
<script setup>
import { onMounted, computed } from 'vue'
import { useData } from 'vitepress'
// import { data } from './index.data.ts'
import IconPreview from './IconPreview.vue'
import PageContainer from './PageContainer.vue'
const { params } = useData()
docs/.vitepress/components/IconDetailName.vue → docs/.vitepress/theme/components/icons/IconDetailName.vue
View File
docs/.vitepress/components/IconDetailOverlay.vue → docs/.vitepress/theme/components/icons/IconDetailOverlay.vue
+10 -46
View File
@@ -1,21 +1,18 @@
<script setup lang="ts">
import type { IconEntity } from '../types'
import { ref, computed } from 'vue'
import type { IconEntity } from '../../types'
import { computed, ref } from 'vue'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
import IconButton from './IconButton.vue';
import Badge from './Badge.vue';
import ButtonMenu from './ButtonMenu.vue';
import IconDetailName from './IconDetailName.vue';
import IconButton from '../base/IconButton.vue';
import IconPreview from './IconPreview.vue';
import { x, externalLink } from '../../iconNodes'
import { x, expand } from '../../../data/iconNodes'
import { useRouter } from 'vitepress';
import IconInfo from './IconInfo.vue';
const props = defineProps<{
icon: IconEntity
}>()
const emit = defineEmits(['close'])
const isOpen = computed(() => !!props.icon)
function onClose() {
@@ -24,22 +21,13 @@
const { go } = useRouter()
const size = 24
const gridLines = computed(() => Array.from({ length:(size - 1) }))
const iconComponent = computed(() => {
if (!props.icon) return null
return createLucideIcon(props.icon.name, props.icon.iconNode)
})
const tags = computed(() => {
if (!props.icon) return []
return props.icon.tags.join(' • ')
})
const CloseIcon = createLucideIcon('Close', x)
const ExternalLinkIcon = createLucideIcon('ExternalLink', externalLink)
const Expand = createLucideIcon('Expand', expand)
</script>
<template>
@@ -48,39 +36,19 @@
<div class="overlay-panel">
<nav class="overlay-menu">
<IconButton @click="go(`/icons/${icon.name}`)">
<component :is="ExternalLinkIcon" />
<component :is="Expand" />
</IconButton>
<IconButton @click="onClose">
<component :is="CloseIcon" />
</IconButton>
</nav>
<IconPreview
id="previewer"
:name="props.icon.name"
:iconNode="props.icon.iconNode"
customizable
/>
<div class="icon-info">
<IconDetailName class="icon-name">
{{ props.icon.name }}
</IconDetailName>
<!-- <p class="icon-tags">
{{ tags }}
</p> -->
<div class="categories">
<Badge v-for="category in icon.categories" :href="`/icons/categories#${category}`">
{{ category }}
</Badge>
</div>
<ButtonMenu
:options="[
{ text: 'Copy SVG' , onClick: () => {} },
{ text: 'Copy Data URL' , onClick: () => {} },
{ text: 'Copy PNG' , onClick: () => {} },
]"
/>
</div>
<IconInfo :icon="props.icon" />
</div>
</div>
</Transition>
@@ -166,10 +134,6 @@
opacity: 0;
}
.categories {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
</style>
docs/.vitepress/components/IconGrid.vue → docs/.vitepress/theme/components/icons/IconGrid.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { IconEntity } from '../types'
import type { IconEntity } from '../../types'
import IconItem from './IconItem.vue'
const emit = defineEmits(['setActiveIcon'])
docs/.vitepress/theme/components/icons/IconInfo.vue
+60
View File
@@ -0,0 +1,60 @@
<script setup lang="ts">
import { IconEntity } from '../../types';
import IconDetailName from './IconDetailName.vue';
import Badge from '../base/Badge.vue';
import CopySVGButton from './CopySVGButton.vue';
import CopyCodeButton from './CopyCodeButton.vue';
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
import {useData, useRouter} from 'vitepress';
import { onMounted } from 'vue';
defineProps<{
icon: IconEntity
}>()
const { go } = useRouter()
const { page } = useData()
</script>
<template>
<div class="icon-info">
<IconDetailName class="icon-name">
{{ icon.name }}
</IconDetailName>
<div class="group">
<Badge
v-for="category in icon.categories"
class="category"
:href="`/icons/categories#${category}`"
>
{{ category }}
</Badge>
</div>
<div class="group">
<CopySVGButton />
<CopyCodeButton :name="icon.name"/>
<VPButton
v-if="page?.relativePath?.startsWith?.(`/icons/${icon.name}`)"
:href="`/icons/${icon.name}`"
text="See Code examples"
theme="alt"
@click="go(`/icons/${icon.name}`)"
/>
</div>
</div>
</template>
<style scoped>
.group {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.category {
text-transform: capitalize;
}
</style>
docs/.vitepress/components/IconItem.vue → docs/.vitepress/theme/components/icons/IconItem.vue
+1 -10
View File
@@ -1,8 +1,6 @@
<script setup lang="ts">
// import type { IconEntity } from '../types';
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
import { useMediaQuery } from '@vueuse/core';
import { useAside } from 'vitepress/dist/client/theme-default/composables/aside.js'
import { useRouter } from 'vitepress';
export type IconNode = [elementName: string, attrs: Record<string, string>][]
@@ -11,6 +9,7 @@ const props = defineProps<{
name: string;
tags: string[];
categories: string[];
// TODO: Add contributors
// contributors: Contributor[];
iconNode: IconNode;
active: boolean;
@@ -115,12 +114,6 @@ function navigateToIcon() {
font-size: 16px;
}
/* .icon-button {
border-color: var(--vp-button-alt-active-border);
color: var(--vp-button-alt-active-text);
background-color: var(--vp-button-alt-active-bg);
} */
.icon-button:hover {
border-color: var(--vp-button-alt-hover-border);
color: var(--vp-button-alt-hover-text);
@@ -135,8 +128,6 @@ function navigateToIcon() {
.icon-button.active {
border-color: var(--vp-c-brand);
/* color: var(--vp-button-alt-active-text);
background-color: var(--vp-button-alt-active-bg); */
}
.lucide-icon {
docs/.vitepress/components/IconPreview.vue → docs/.vitepress/theme/components/icons/IconPreview.vue
+9 -8
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { IconEntity } from '../types'
import { computed } from 'vue'
import type { IconEntity } from '../../types'
import { computed, ref } from 'vue'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
import { useIconStyleContext } from '../composables/useIconStyle';
import { useIconStyleContext } from '../../composables/useIconStyle';
const props = defineProps<{
name: IconEntity['name']
@@ -11,6 +11,7 @@ const props = defineProps<{
}>()
const { size, color, strokeWidth } = useIconStyleContext()
const previewIcon = ref()
const gridLines = computed(() => Array.from({ length:(size.value - 1) }))
@@ -23,11 +24,11 @@ const iconComponent = computed(() => {
<template>
<div class="icon-container">
<component
ref="previewIcon"
:is="iconComponent"
class="icon-component"
:class="{ customizable }"
:size="size"
:color="color"
:width="size"
:height="size"
:stroke="color"
:stroke-width="strokeWidth"
/>
<svg class="icon-grid" :viewBox="`0 0 ${size} ${size}`" fill="none" stroke-width="0.1" xmlns="http://www.w3.org/2000/svg">
@@ -55,7 +56,7 @@ const iconComponent = computed(() => {
background: var(--vp-c-bg-alt);
border-radius: 8px;
}
.icon-component {
.icon-container > :deep(svg:not(.icon-grid)) {
width: 100%;
height: 100%;
position: relative;
docs/.vitepress/components/IconsCategoryOverview.vue → docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
+5 -7
View File
@@ -1,13 +1,11 @@
<script setup lang="ts">
import { ref, computed, nextTick, watch, onMounted } from 'vue'
import type { IconEntity, Category } from '../types'
import { ref, computed } from 'vue'
import type { IconEntity, Category } from '../../types'
import IconDetailOverlay from './IconDetailOverlay.vue'
import IconGrid from './IconGrid.vue'
import useSearch from '../composables/useSearch'
import Input from './Input.vue'
import EndOfPage from './EndOfPage.vue'
import { useCategoryView } from '../composables/useCategoryView'
import useSearchInput from '../composables/useSearchInput'
import useSearch from '../../composables/useSearch'
import Input from '../base/Input.vue'
import useSearchInput from '../../composables/useSearchInput'
const props = defineProps<{
icons: IconEntity[]
docs/.vitepress/components/IconsOverview.vue → docs/.vitepress/theme/components/icons/IconsOverview.vue
+7 -8
View File
@@ -1,14 +1,13 @@
<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import type { IconEntity } from '../types'
import { refThrottled, useMediaQuery, useOffsetPagination } from '@vueuse/core'
import IconItem from './IconItem.vue'
import { ref, computed, watch } from 'vue'
import type { IconEntity } from '../../types'
import { useMediaQuery, useOffsetPagination } from '@vueuse/core'
import IconDetailOverlay from './IconDetailOverlay.vue'
import IconGrid from './IconGrid.vue'
import InputSearch from './InputSearch.vue'
import useSearch from '../composables/useSearch'
import EndOfPage from './EndOfPage.vue'
import useSearchInput from '../composables/useSearchInput'
import InputSearch from '../base/InputSearch.vue'
import useSearch from '../../composables/useSearch'
import EndOfPage from '../base/EndOfPage.vue'
import useSearchInput from '../../composables/useSearchInput'
const props = defineProps<{
icons: IconEntity[]
docs/.vitepress/components/SidebarIconCustomizer.vue → docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
+6 -6
View File
@@ -1,12 +1,12 @@
<script setup lang="ts">
import { shallowRef, type Ref } from 'vue'
import { useCssVar, syncRef } from '@vueuse/core'
import { useIconStyleContext } from '../composables/useIconStyle'
import RangeSlider from './RangeSlider.vue'
import IconButton from './IconButton.vue'
import InputField from './InputField.vue'
import ColorPicker from './ColorPicker.vue'
import { rotateCw } from '../../iconNodes'
import { useIconStyleContext } from '../../composables/useIconStyle'
import RangeSlider from '../base/RangeSlider.vue'
import IconButton from '../base/IconButton.vue'
import InputField from '../base/InputField.vue'
import ColorPicker from '../base/ColorPicker.vue'
import { rotateCw } from '../../../data/iconNodes'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
const props = defineProps<{
docs/.vitepress/composables/useActiveAnchor.ts → docs/.vitepress/theme/composables/useActiveAnchor.ts
View File
docs/.vitepress/composables/useCategoryView.ts → docs/.vitepress/theme/composables/useCategoryView.ts
-2
View File
@@ -1,5 +1,3 @@
/* eslint-disable no-console */
import {
ref, inject, Ref
} from 'vue';
docs/.vitepress/composables/useIconCodeExample.ts → docs/.vitepress/theme/composables/useIconCodeExample.ts
+6 -22
View File
@@ -1,5 +1,5 @@
import { startCase, camelCase } from 'lodash-es'
import { computed, Ref } from 'vue'
import { computed } from 'vue'
type CodeExampleType = Record<string, {
title: string,
@@ -33,11 +33,7 @@ const getIconCodes = (name: string): CodeExampleType => {
const App = () => {
return (
<${pascalCase}
color="red"
size={48}
strokeWidth={1.5}
/>
<${pascalCase}/>
);
};
@@ -53,7 +49,7 @@ export default App;
{
language: 'markup',
code: `<template>
<${pascalCase} color="red" :size="32" />
<${pascalCase} />
</template>
<script setup>
@@ -73,11 +69,7 @@ import { ${pascalCase} } from 'lucide-vue-next';
import { ${pascalCase} } from 'lucide-svelte';
</script>
<${pascalCase}
color="#ff3e98"
size="48"
strokeWidth="1.5"
/>
<${pascalCase}/>
`,
metastring: '{2,5}',
},
@@ -92,11 +84,7 @@ import { ${pascalCase} } from 'lucide-svelte';
const App = () => {
return (
<${pascalCase}
color="red"
size={48}
strokeWidth={1.5}
/>
<${pascalCase}/>
);
};
@@ -115,11 +103,7 @@ export default App;
const App = () => {
return (
<${pascalCase}
color="red"
size={48}
strokeWidth={1.5}
/>
<${pascalCase}/>
);
};
docs/.vitepress/composables/useIconStyle.ts → docs/.vitepress/theme/composables/useIconStyle.ts
View File
docs/.vitepress/composables/useSearch.ts → docs/.vitepress/theme/composables/useSearch.ts
+2 -2
View File
@@ -4,8 +4,8 @@ import { shallowRef, computed, Ref } from 'vue';
const useSearch = <T>(query: Ref<string>, collection: T[], keys: Fuse.FuseOptionKey<T>[] = []) => {
const index = shallowRef(
new Fuse(collection, {
threshold: 0.2,
keys,
threshold: 0.2,
keys,
})
)
docs/.vitepress/composables/useSearchInput.ts → docs/.vitepress/theme/composables/useSearchInput.ts
View File
docs/.vitepress/theme/index.ts
+3 -3
View File
@@ -3,9 +3,9 @@ import DefaultTheme from 'vitepress/theme'
import './style.css'
import { Theme } from 'vitepress'
import IconsSidebarNavAfter from './layouts/IconsSidebarNavAfter.vue'
import HomeHeroIconsCard from '../components/HomeHeroIconsCard.vue'
import { ICON_STYLE_CONTEXT, iconStyleContext } from '../composables/useIconStyle'
import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from '../composables/useCategoryView'
import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue'
import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle'
import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView'
const theme: Partial<Theme> = {
extends: DefaultTheme,
docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<script setup>
import { useData } from 'vitepress'
import CategoryList from '../../components/CategoryList.vue'
import SidebarIconCustomizer from '../../components/SidebarIconCustomizer.vue'
import CategoryList from '../components/icons/CategoryList.vue'
import SidebarIconCustomizer from '../components/icons/SidebarIconCustomizer.vue'
const { page } = useData()
docs/.vitepress/types.ts → docs/.vitepress/theme/types.ts
View File
docs/.vitepress/vue-shim.d.ts
Vendored
+6
View File
@@ -2,3 +2,9 @@ declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module "*.data.ts" {
const data: any;
export { data };
}
docs/comparison.md → docs/guide/comparison.md
View File
docs/icons/[name].md
+19 -13
View File
@@ -7,21 +7,27 @@ next: false
prev: false
sidebar: true
---
<script setup>
<script setup lang="ts">
import { computed } from 'vue'
import IconPreview from '../.vitepress/components/IconPreview.vue'
import IconDetailName from '../.vitepress/components/IconDetailName.vue'
import { useData } from 'vitepress'
import CodeGroup from '../.vitepress/components/CodeGroup.vue'
import IconPreview from '../.vitepress/theme/components/icons/IconPreview.vue'
import IconInfo from '../.vitepress/theme/components/icons/IconInfo.vue'
import CodeGroup from '../.vitepress/theme/components/base/CodeGroup.vue'
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
import { data } from './codeExamples.data'
import { camelCase, startCase } from 'lodash-es'
const { params } = useData()
const tabs = computed(() => params.value.codeExamples?.map(
const tabs = computed(() => data.codeExamples?.map(
(codeExample) => codeExample.title) ?? []
)
const codeExample = computed(() => params.value.codeExamples?.map(
(codeExample) => codeExample.code
const codeExample = computed(() => data.codeExamples?.map(
(codeExample) => {
const pascalCase = startCase(camelCase( params.value.name)).replace(/\s/g, '')
return codeExample.code.replace(/PascalCase/g, pascalCase).replace(/Name/g, params.value.name)
}
).join('') ?? []
)
</script>
@@ -34,11 +40,7 @@ const codeExample = computed(() => params.value.codeExamples?.map(
:class="$style.preview"
/>
</div>
<div>
<IconDetailName>
{{$params.name}}
</IconDetailName>
</div>
<IconInfo :icon="$params"/>
</div>
<CodeGroup :groups="tabs" groupName="icon-code-example">
@@ -54,7 +56,11 @@ const codeExample = computed(() => params.value.codeExamples?.map(
max-width: 240px;
}
(min-width: 640px) {
.layout {
align-items: flex-start;
}
@media (min-width: 640px) {
.layout {
align-items: flex-start;
display: grid;
docs/icons/[name].paths.ts
+4 -20
View File
@@ -1,33 +1,15 @@
import fs from "fs";
import path from "path";
import { getAllData } from "../.vitepress/lib/icons";
import createCodeExamples from "../.vitepress/lib/createCodeExamples";
const directory = path.join(process.cwd(), 'icons');
export function getAllNames() {
const fileNames = fs.readdirSync(directory).filter((file) => path.extname(file) === '.json');
return fileNames
.filter((fileName) => fs.existsSync(directory + '/' + path.basename(fileName, '.json') + '.svg'))
.map((fileName) => path.basename(fileName, '.json'));
}
export default {
paths: async () => {
const icons = await getAllData()
const result = await createCodeExamples('activity')
// const codeExamplesPromises = icons.map(async (icon) => {
// return createCodeExamples(icon.name);
// })
// const codeExamples = await Promise.all(codeExamplesPromises);
const pathsPromises = icons.map(async (iconData, index) => {
// const codeExamples = await createCodeExamples(iconData.name);
return icons.map((iconData, index) => {
const params = {
...iconData,
codeExamples: result
@@ -37,5 +19,7 @@ export default {
params,
}
})
return Promise.all(pathsPromises);
}
}
docs/icons/categories.md
+2 -2
View File
@@ -7,8 +7,8 @@ sidebar: true
<script setup>
import { data } from './index.data.ts'
import PageContainer from '../.vitepress/components/PageContainer.vue'
import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOverview.vue'
import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
import IconsCategoryOverview from '../.vitepress/theme/components/icons/IconsCategoryOverview.vue'
</script>
docs/icons/codeExamples.data.ts
+13
View File
@@ -0,0 +1,13 @@
import createCodeExamples from '../.vitepress/lib/createCodeExamples'
export default {
async load() {
const codeExamples = await createCodeExamples()
// const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
return {
codeExamples,
}
}
}
docs/icons/index.data.ts
+1 -14
View File
@@ -1,18 +1,5 @@
import fs from 'fs'
import path from 'path'
import { getAllData } from '../.vitepress/lib/icons'
export function getAllCategoryFiles() {
const fileNames = fs.readdirSync(path.join('../categories')).filter((file) => path.extname(file) === '.json');
return fileNames
.map((fileName) => path.basename(fileName, '.json'))
.map((fileName) => [fileName, fs.readFileSync(path.join('../categories', fileName + '.json'), 'utf8')])
.map(([name, file]) => ({
name,
...JSON.parse(file)
}));
}
import { getAllCategoryFiles } from '../.vitepress/lib/categories'
export default {
async load() {
docs/icons/index.md
+2 -2
View File
@@ -7,8 +7,8 @@ sidebar: true
<script setup>
import { data } from './index.data.ts'
import IconsOverview from '../.vitepress/components/IconsOverview.vue'
import PageContainer from '../.vitepress/components/PageContainer.vue'
import IconsOverview from '../.vitepress/theme/components/icons/IconsOverview.vue'
import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
const { categories, icons } = data
</script>
docs/index.md
+2 -2
View File
@@ -49,8 +49,8 @@ features:
---
<script setup>
import HomePackagesSection from './.vitepress/components/HomePackagesSection.vue'
import HomeIconCustomizer from './.vitepress/components/HomeIconCustomizer.vue'
import HomePackagesSection from './.vitepress/theme/components/home/HomePackagesSection.vue'
import HomeIconCustomizer from './.vitepress/theme/components/home/HomeIconCustomizer.vue'
</script>
<HomePackagesSection />
docs/package.json
+1 -1
View File
@@ -23,7 +23,7 @@
"h3": "^1.6.4",
"nitropack": "latest",
"node-fetch": "2",
"vitepress": "1.0.0-alpha.73"
"vitepress": "1.0.0-alpha.75"
},
"dependencies": {
"@headlessui/vue": "^1.7.13",
docs/tsconfig.json
+3 -1
View File
@@ -2,6 +2,8 @@
"extends": "./.nitro/types/tsconfig.json",
"compilerOptions": {
"jsx": "react",
"allowImportingTsExtensions": true
"allowImportingTsExtensions": true,
"allowSyntheticDefaultImports": true,
"noEmit": true
}
}
docs/vercel.json
+4 -1
View File
@@ -1,3 +1,6 @@
{
"cleanUrls": true
"cleanUrls": true,
"github": {
"silent": true
}
}
pnpm-lock.yaml
Generated
+80 -57
View File
@@ -105,8 +105,8 @@ importers:
specifier: '2'
version: 2.6.7
vitepress:
specifier: 1.0.0-alpha.73
version: 1.0.0-alpha.73(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
specifier: 1.0.0-alpha.75
version: 1.0.0-alpha.75(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
packages/lucide:
devDependencies:
@@ -816,25 +816,25 @@ packages:
resolution: {integrity: sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==}
dev: true
/@algolia/autocomplete-core@1.7.4:
resolution: {integrity: sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==}
/@algolia/autocomplete-core@1.8.2:
resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==}
dependencies:
'@algolia/autocomplete-shared': 1.7.4
'@algolia/autocomplete-shared': 1.8.2
dev: true
/@algolia/autocomplete-preset-algolia@1.7.4(@algolia/client-search@4.17.0)(algoliasearch@4.17.0):
resolution: {integrity: sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==}
/@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.17.0)(algoliasearch@4.17.0):
resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==}
peerDependencies:
'@algolia/client-search': '>= 4.9.1 < 6'
algoliasearch: '>= 4.9.1 < 6'
dependencies:
'@algolia/autocomplete-shared': 1.7.4
'@algolia/autocomplete-shared': 1.8.2
'@algolia/client-search': 4.17.0
algoliasearch: 4.17.0
dev: true
/@algolia/autocomplete-shared@1.7.4:
resolution: {integrity: sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg==}
/@algolia/autocomplete-shared@1.8.2:
resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==}
dev: true
/@algolia/cache-browser-local-storage@4.17.0:
@@ -4838,7 +4838,7 @@ packages:
'@babel/helper-module-imports': 7.18.6
'@babel/helper-plugin-utils': 7.20.2
'@babel/plugin-syntax-jsx': 7.18.6(@babel/core@7.20.2)
'@babel/types': 7.20.7
'@babel/types': 7.20.2
dev: false
/@babel/plugin-transform-react-jsx@7.19.0(@babel/core@7.18.13):
@@ -6886,14 +6886,14 @@ packages:
engines: {node: '>=10.0.0'}
dev: true
/@docsearch/css@3.3.3:
resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==}
/@docsearch/css@3.3.4:
resolution: {integrity: sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA==}
dev: true
/@docsearch/js@3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==}
/@docsearch/js@3.3.4(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-Xd2saBziXJ1UuVpcDz94zAFEFAM6ap993agh0za2e3LDZLhaW993b1f9gyUL4e1CZLsR076tztG2un2gVncvpA==}
dependencies:
'@docsearch/react': 3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
'@docsearch/react': 3.3.4(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
preact: 10.11.2
transitivePeerDependencies:
- '@algolia/client-search'
@@ -6902,8 +6902,8 @@ packages:
- react-dom
dev: true
/@docsearch/react@3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==}
/@docsearch/react@3.3.4(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==}
peerDependencies:
'@types/react': '>= 16.8.0 < 19.0.0'
react: '>= 16.8.0 < 19.0.0'
@@ -6916,9 +6916,9 @@ packages:
react-dom:
optional: true
dependencies:
'@algolia/autocomplete-core': 1.7.4
'@algolia/autocomplete-preset-algolia': 1.7.4(@algolia/client-search@4.17.0)(algoliasearch@4.17.0)
'@docsearch/css': 3.3.3
'@algolia/autocomplete-core': 1.8.2
'@algolia/autocomplete-preset-algolia': 1.8.2(@algolia/client-search@4.17.0)(algoliasearch@4.17.0)
'@docsearch/css': 3.3.4
algoliasearch: 4.17.0
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
@@ -10531,14 +10531,14 @@ packages:
vue: 3.2.45
dev: true
/@vitejs/plugin-vue@4.1.0(vite@4.3.1)(vue@3.2.47):
resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
/@vitejs/plugin-vue@4.2.1(vite@4.3.4)(vue@3.2.47):
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.3.1
vite: 4.3.4
vue: 3.2.47
dev: true
@@ -12943,7 +12943,7 @@ packages:
css-select: 4.3.0
parse5: 6.0.1
parse5-htmlparser2-tree-adapter: 6.0.1
postcss: 8.4.21
postcss: 8.4.23
pretty-bytes: 5.6.0
dev: true
@@ -13023,12 +13023,12 @@ packages:
peerDependencies:
webpack: ^5.0.0
dependencies:
icss-utils: 5.1.0(postcss@8.4.21)
postcss: 8.4.21
postcss-modules-extract-imports: 3.0.0(postcss@8.4.21)
postcss-modules-local-by-default: 4.0.0(postcss@8.4.21)
postcss-modules-scope: 3.0.0(postcss@8.4.21)
postcss-modules-values: 4.0.0(postcss@8.4.21)
icss-utils: 5.1.0(postcss@8.4.23)
postcss: 8.4.23
postcss-modules-extract-imports: 3.0.0(postcss@8.4.23)
postcss-modules-local-by-default: 4.0.0(postcss@8.4.23)
postcss-modules-scope: 3.0.0(postcss@8.4.23)
postcss-modules-values: 4.0.0(postcss@8.4.23)
postcss-value-parser: 4.2.0
semver: 7.4.0
webpack: 5.76.1(@swc/core@1.3.35)
@@ -16727,13 +16727,13 @@ packages:
safer-buffer: 2.1.2
dev: true
/icss-utils@5.1.0(postcss@8.4.21):
/icss-utils@5.1.0(postcss@8.4.23):
resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
engines: {node: ^10 || ^12 || >= 14}
peerDependencies:
postcss: ^8.1.0
dependencies:
postcss: 8.4.21
postcss: 8.4.23
dev: true
/ieee754@1.2.1:
@@ -19685,6 +19685,12 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
/nanoid@3.3.6:
resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
dev: true
/nanomatch@1.2.13:
resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
engines: {node: '>=0.10.0'}
@@ -21327,45 +21333,45 @@ packages:
postcss: 8.4.5
dev: true
/postcss-modules-extract-imports@3.0.0(postcss@8.4.21):
/postcss-modules-extract-imports@3.0.0(postcss@8.4.23):
resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
engines: {node: ^10 || ^12 || >= 14}
peerDependencies:
postcss: ^8.1.0
dependencies:
postcss: 8.4.21
postcss: 8.4.23
dev: true
/postcss-modules-local-by-default@4.0.0(postcss@8.4.21):
/postcss-modules-local-by-default@4.0.0(postcss@8.4.23):
resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
engines: {node: ^10 || ^12 || >= 14}
peerDependencies:
postcss: ^8.1.0
dependencies:
icss-utils: 5.1.0(postcss@8.4.21)
postcss: 8.4.21
icss-utils: 5.1.0(postcss@8.4.23)
postcss: 8.4.23
postcss-selector-parser: 6.0.10
postcss-value-parser: 4.2.0
dev: true
/postcss-modules-scope@3.0.0(postcss@8.4.21):
/postcss-modules-scope@3.0.0(postcss@8.4.23):
resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
engines: {node: ^10 || ^12 || >= 14}
peerDependencies:
postcss: ^8.1.0
dependencies:
postcss: 8.4.21
postcss: 8.4.23
postcss-selector-parser: 6.0.10
dev: true
/postcss-modules-values@4.0.0(postcss@8.4.21):
/postcss-modules-values@4.0.0(postcss@8.4.23):
resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
engines: {node: ^10 || ^12 || >= 14}
peerDependencies:
postcss: ^8.1.0
dependencies:
icss-utils: 5.1.0(postcss@8.4.21)
postcss: 8.4.21
icss-utils: 5.1.0(postcss@8.4.23)
postcss: 8.4.23
dev: true
/postcss-nesting@10.2.0(postcss@8.4.21):
@@ -21644,7 +21650,7 @@ packages:
resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.4
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
@@ -21653,7 +21659,7 @@ packages:
resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.4
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
@@ -21666,11 +21672,20 @@ packages:
picocolors: 1.0.0
source-map-js: 1.0.2
/postcss@8.4.23:
resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/postcss@8.4.5:
resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.4
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
@@ -22687,7 +22702,7 @@ packages:
adjust-sourcemap-loader: 4.0.0
convert-source-map: 1.8.0
loader-utils: 2.0.2
postcss: 8.4.21
postcss: 8.4.23
source-map: 0.6.1
dev: true
@@ -22947,6 +22962,14 @@ packages:
fsevents: 2.3.2
dev: true
/rollup@3.21.3:
resolution: {integrity: sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
dev: true
/rollup@3.5.1:
resolution: {integrity: sha512-hdQWTvPeiAbM6SUkxV70HdGUVxsgsc+CLy5fuh4KdgUBJ0SowXiix8gANgXoG3wEuLwfoJhCT2V+WwxfWq9Ikw==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -25505,8 +25528,8 @@ packages:
fsevents: 2.3.2
dev: true
/vite@4.3.1:
resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
/vite@4.3.4:
resolution: {integrity: sha512-f90aqGBoxSFxWph2b39ae2uHAxm5jFBBdnfueNxZAT1FTpM13ccFQExCaKbR2xFW5atowjleRniQ7onjJ22QEg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
@@ -25531,8 +25554,8 @@ packages:
optional: true
dependencies:
esbuild: 0.17.16
postcss: 8.4.21
rollup: 3.20.2
postcss: 8.4.23
rollup: 3.21.3
optionalDependencies:
fsevents: 2.3.2
dev: true
@@ -25548,20 +25571,20 @@ packages:
vite: 3.1.8
dev: true
/vitepress@1.0.0-alpha.73(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-BWK7b5yYxdA3SeBnUV+ly8vJU2MFcQhjooycLDc2AsSd07uGp+WO6J6gBmjwHuOz5hgcNa+/VxGWKKwBycdbnA==}
/vitepress@1.0.0-alpha.75(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-twpPZ/6UnDR8X0Nmj767KwKhXlTQQM9V/J1i2BP9ryO29/w4hpxBfEum6nvfpNhJ4H3h+cIhwzAK/e9crZ6HEQ==}
hasBin: true
dependencies:
'@docsearch/css': 3.3.3
'@docsearch/js': 3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
'@vitejs/plugin-vue': 4.1.0(vite@4.3.1)(vue@3.2.47)
'@docsearch/css': 3.3.4
'@docsearch/js': 3.3.4(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
'@vitejs/plugin-vue': 4.2.1(vite@4.3.4)(vue@3.2.47)
'@vue/devtools-api': 6.5.0
'@vueuse/core': 10.1.0(vue@3.2.47)
body-scroll-lock: 4.0.0-beta.0
mark.js: 8.11.1
minisearch: 6.0.1
shiki: 0.14.2
vite: 4.3.1
vite: 4.3.4
vue: 3.2.47
transitivePeerDependencies:
- '@algolia/client-search'
scripts/writeIconMetaIndex.mjs
+5 -5
View File
@@ -6,11 +6,11 @@ const currentDir = process.cwd();
const ICONS_DIR = path.resolve(currentDir, '../icons');
const iconJsonFiles = readSvgDirectory(ICONS_DIR, '.json');
if (fs.existsSync(path.resolve(currentDir, 'iconMetaData.ts'))) {
fs.unlinkSync(path.resolve(currentDir, 'iconMetaData.ts'));
}
const location = path.resolve(currentDir, '.vitepress/data', 'iconMetaData.ts');
const location = path.resolve(currentDir, `iconMetaData.ts`);
if (fs.existsSync(location)) {
fs.unlinkSync(location);
}
let outputString = '';
@@ -18,7 +18,7 @@ iconJsonFiles.forEach((iconJsonFile) => {
const iconName = path.basename(iconJsonFile, '.json');
outputString += `export { default as ${toCamelCase(
iconName,
)} } from '../icons/${iconName}.json';\n`;
)} } from '../../../icons/${iconName}.json';\n`;
});
fs.promises
scripts/writeIconNodes.mjs
+2 -2
View File
@@ -8,10 +8,10 @@ const ICONS_DIR = path.resolve(currentDir, '../icons');
const svgFiles = readSvgDirectory(ICONS_DIR);
const icons = renderIconsObject(svgFiles, ICONS_DIR, true);
const iconNodesDirectory = path.resolve(currentDir, 'iconNodes');
const iconNodesDirectory = path.resolve(currentDir, '.vitepress/data', 'iconNodes');
if (fs.existsSync(iconNodesDirectory)) {
fs.rmSync(path.resolve(currentDir, 'iconNodes'), { recursive: true, force: true });
fs.rmSync(iconNodesDirectory, { recursive: true, force: true });
}
if (!fs.existsSync(iconNodesDirectory)) {