mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
pheralb
39 lines
1.0 KiB
Svelte
39 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import * as Dialog from "@/components/ui/dialog";
|
|
import CodeBlock from "@/components/codeBlock.svelte";
|
|
|
|
interface Props {
|
|
children: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
|
|
let registryCode = `
|
|
"registries": {
|
|
"@svgl": "https://svgl.app/r/{name}.json"
|
|
}
|
|
`;
|
|
</script>
|
|
|
|
<Dialog.Root>
|
|
<Dialog.Trigger>
|
|
{@render children()}
|
|
</Dialog.Trigger>
|
|
<Dialog.Content class="text-sm">
|
|
<Dialog.Header>
|
|
<Dialog.Title>Setup shadcn/ui registry</Dialog.Title>
|
|
<Dialog.Description>
|
|
Use the code below to configure the @svgl registry for your project.
|
|
</Dialog.Description>
|
|
</Dialog.Header>
|
|
<p>
|
|
1. Copy and paste the code into
|
|
<span class="font-mono">components.json</span>:
|
|
</p>
|
|
<CodeBlock code={registryCode} />
|
|
<p class="mt-2">2. Then use the following command to add SVGs:</p>
|
|
<CodeBlock code="npx shadcn@latest add @svgl/[svg-name]" />
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|