mirror of https://github.com/vuejs/vitepress
feat: hashed icon styles, offline dev icons, arbitrary iconify collections (#5407)
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>pull/5408/head
Divyansh Singh
2 weeks ago
committed by
GitHub
parent
d3b2957db0
commit
d00a5e0f87
@ -0,0 +1,158 @@
|
||||
import { readFileSync, readdirSync } from 'node:fs'
|
||||
import { join, resolve } from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
const isBuild = !!process.env.VITE_TEST_BUILD
|
||||
|
||||
const maskImage = (selector: string) =>
|
||||
page.$eval(selector, (el) => {
|
||||
const styles = getComputedStyle(el)
|
||||
return styles.maskImage || styles.webkitMaskImage
|
||||
})
|
||||
|
||||
describe('icons', () => {
|
||||
const externalRequests: string[] = []
|
||||
const devIconRequests: string[] = []
|
||||
|
||||
beforeAll(() => {
|
||||
page.on('request', (request) => {
|
||||
const url = request.url()
|
||||
if (!url.startsWith(`http://localhost:${process.env['PORT']}`)) {
|
||||
externalRequests.push(url)
|
||||
}
|
||||
if (url.includes('/_vpi/')) devIconRequests.push(url)
|
||||
})
|
||||
})
|
||||
|
||||
test('social links render from both collections', async () => {
|
||||
await goto('/')
|
||||
|
||||
for (const [label, cls] of [
|
||||
['Home social link', '.vpi-simple-icons-github'],
|
||||
['Heart social link', '.vpi-lucide-heart']
|
||||
]) {
|
||||
const selector = `a[aria-label="${label}"] span`
|
||||
expect(await page.getAttribute(selector, 'class')).toBe(cls.slice(1))
|
||||
// an unresolved icon computes to mask-image: none and renders nothing
|
||||
await page.waitForFunction(
|
||||
(sel) => {
|
||||
const el = document.querySelector(sel)
|
||||
if (!el) return false
|
||||
const styles = getComputedStyle(el)
|
||||
return (styles.maskImage || styles.webkitMaskImage) !== 'none'
|
||||
},
|
||||
selector,
|
||||
{ timeout: 3000 }
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
test('VPIcon renders collection, default-collection and raw svg icons', async () => {
|
||||
await goto('/icons/')
|
||||
|
||||
expect(await page.getAttribute('[data-test-icon="lucide"]', 'class')).toBe(
|
||||
'vpi-lucide-rocket'
|
||||
)
|
||||
expect(await page.getAttribute('[data-test-icon="simple"]', 'class')).toBe(
|
||||
'vpi-simple-icons-vuedotjs'
|
||||
)
|
||||
expect(
|
||||
await page.$eval('[data-test-icon="raw"]', (el) => el.innerHTML)
|
||||
).toContain('<svg')
|
||||
// the raw-svg wrapper must not pick up the mask machinery, which would
|
||||
// paint a solid currentColor box over the svg
|
||||
expect(
|
||||
await page.$eval('[data-test-icon="raw"]', (el) => {
|
||||
const styles = getComputedStyle(el)
|
||||
return {
|
||||
background: styles.backgroundColor,
|
||||
svgWidth: getComputedStyle(el.querySelector('svg')!).width
|
||||
}
|
||||
})
|
||||
).toEqual({ background: 'rgba(0, 0, 0, 0)', svgWidth: '16px' })
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
const el = document.querySelector('[data-test-icon="lucide"]')
|
||||
if (!el) return false
|
||||
const styles = getComputedStyle(el)
|
||||
return (styles.maskImage || styles.webkitMaskImage) !== 'none'
|
||||
})
|
||||
})
|
||||
|
||||
test('no icon is ever fetched from an external origin', () => {
|
||||
expect(externalRequests).toEqual([])
|
||||
})
|
||||
|
||||
test.runIf(!isBuild)(
|
||||
'dev resolves icons from the local endpoint',
|
||||
async () => {
|
||||
await goto('/')
|
||||
await page.waitForFunction(() => {
|
||||
const el = document.querySelector(
|
||||
'a[aria-label="Heart social link"] span'
|
||||
)
|
||||
if (!el) return false
|
||||
const styles = getComputedStyle(el)
|
||||
return (styles.maskImage || styles.webkitMaskImage).includes('/_vpi/')
|
||||
})
|
||||
expect(
|
||||
devIconRequests.some((url) => url.includes('/_vpi/lucide/heart.svg'))
|
||||
).toBe(true)
|
||||
}
|
||||
)
|
||||
|
||||
test.runIf(isBuild)(
|
||||
'build inlines icons into the hashed stylesheet',
|
||||
async () => {
|
||||
await goto('/')
|
||||
expect(
|
||||
await maskImage('a[aria-label="Heart social link"] span')
|
||||
).toContain('data:image/svg+xml')
|
||||
expect(devIconRequests).toEqual([])
|
||||
|
||||
const html = readFileSync(
|
||||
resolve(
|
||||
fileURLToPath(import.meta.url),
|
||||
'../../.vitepress/dist/index.html'
|
||||
),
|
||||
'utf-8'
|
||||
)
|
||||
expect(html).toMatch(/href="\/assets\/vp-icons\.[\w-]+\.css"/)
|
||||
expect(html).not.toContain('__VP_ICONS_HASH__')
|
||||
|
||||
// prose mentioning the placeholder is left alone — only the link tag
|
||||
// gets the hash substituted
|
||||
const iconsPage = readFileSync(
|
||||
resolve(
|
||||
fileURLToPath(import.meta.url),
|
||||
'../../.vitepress/dist/icons/index.html'
|
||||
),
|
||||
'utf-8'
|
||||
)
|
||||
expect(iconsPage).toContain('vp-icons.__VP_ICONS_HASH__.css</code>')
|
||||
expect(iconsPage).toMatch(
|
||||
/<link rel="preload stylesheet" href="\/assets\/vp-icons\.[\w-]+\.css" as="style">/
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
test.runIf(isBuild)(
|
||||
'icons.include forces unrendered icons into the sheet',
|
||||
() => {
|
||||
const assetsDir = resolve(
|
||||
fileURLToPath(import.meta.url),
|
||||
'../../.vitepress/dist/assets'
|
||||
)
|
||||
const cssFile = readdirSync(assetsDir).find((f) =>
|
||||
/^vp-icons\.[\w-]+\.css$/.test(f)
|
||||
)!
|
||||
expect(cssFile).toBeTruthy()
|
||||
const css = readFileSync(join(assetsDir, cssFile), 'utf-8')
|
||||
expect(css).toContain('.vpi-lucide-egg')
|
||||
expect(css).toContain('.vpi-lucide-heart')
|
||||
expect(css).toContain('.vpi-simple-icons-github')
|
||||
// zero-specificity base rules ship with the sheet for any theme
|
||||
expect(css).toContain(':where(')
|
||||
}
|
||||
)
|
||||
})
|
||||
@ -0,0 +1,12 @@
|
||||
# Icons
|
||||
|
||||
<script setup>
|
||||
import { VPIcon } from 'vitepress/theme'
|
||||
</script>
|
||||
|
||||
<VPIcon icon="lucide:rocket" data-test-icon="lucide" />
|
||||
<VPIcon icon="simple-icons:vuedotjs" data-test-icon="simple" />
|
||||
<VPIcon :icon="{ svg: '<svg viewBox=\'0 0 8 8\'><circle cx=\'4\' cy=\'4\' r=\'4\'/></svg>' }" data-test-icon="raw" />
|
||||
|
||||
Prose about the build internals must survive the rewrite pass:
|
||||
`vp-icons.__VP_ICONS_HASH__.css`
|
||||
@ -0,0 +1,159 @@
|
||||
import { resolve } from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
import { generateIconsCSS, resolveIconSVG } from 'node/icons'
|
||||
import { parseIconName } from 'shared/shared'
|
||||
|
||||
// the e2e workspace has @iconify-json/lucide installed — use it as the
|
||||
// resolution root for collection-loading tests
|
||||
const e2eRoot = resolve(fileURLToPath(import.meta.url), '../../../e2e')
|
||||
|
||||
describe('node/icons', () => {
|
||||
describe('parseIconName', () => {
|
||||
test('parses qualified names', () => {
|
||||
expect(parseIconName('lucide:heart')).toEqual({
|
||||
collection: 'lucide',
|
||||
icon: 'heart'
|
||||
})
|
||||
expect(parseIconName('simple-icons:github')).toEqual({
|
||||
collection: 'simple-icons',
|
||||
icon: 'github'
|
||||
})
|
||||
})
|
||||
|
||||
test('rejects bare names and anything outside iconify grammar', () => {
|
||||
for (const name of [
|
||||
'github',
|
||||
'GitHub',
|
||||
'foo bar',
|
||||
'foo:',
|
||||
':bar',
|
||||
'a<b',
|
||||
'foo:bar:baz',
|
||||
'-leading',
|
||||
''
|
||||
]) {
|
||||
expect(parseIconName(name), name).toBeNull()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
describe('generateIconsCSS', () => {
|
||||
test('emits base rules and per-icon rules, no legacy common rule', async () => {
|
||||
// simple-icons is not in the e2e workspace's package.json — this also
|
||||
// covers the fallback to vitepress's own dependency
|
||||
const { css, warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['simple-icons:github']),
|
||||
'compressed'
|
||||
)
|
||||
expect(warnings).toEqual([])
|
||||
expect(css).toContain(
|
||||
'.vpi-simple-icons-github{--icon:url("data:image/svg+xml'
|
||||
)
|
||||
expect(css).toContain(":where([class^='vpi-']")
|
||||
expect(css).toContain('display:inline-block')
|
||||
expect(css).not.toContain('.vpi-social')
|
||||
})
|
||||
|
||||
test('suggests qualification for bare names', async () => {
|
||||
const { css, warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['github']),
|
||||
'compressed'
|
||||
)
|
||||
expect(css).toBe('')
|
||||
expect(warnings).toEqual([
|
||||
expect.stringContaining('"github" has no collection prefix')
|
||||
])
|
||||
expect(warnings[0]).toContain('simple-icons:github')
|
||||
})
|
||||
|
||||
test('groups collections and stays deterministic across insertion order', async () => {
|
||||
const a = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['lucide:heart', 'simple-icons:github', 'lucide:egg']),
|
||||
'compressed'
|
||||
)
|
||||
const b = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['simple-icons:github', 'lucide:egg', 'lucide:heart']),
|
||||
'compressed'
|
||||
)
|
||||
expect(a.css).toBe(b.css)
|
||||
expect(a.css).toContain('.vpi-lucide-heart')
|
||||
expect(a.css).toContain('.vpi-lucide-egg')
|
||||
expect(a.css).toContain('.vpi-simple-icons-github')
|
||||
})
|
||||
|
||||
test('warns on icons missing from an installed collection', async () => {
|
||||
const { css, warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['simple-icons:github', 'simple-icons:thisiconisnotreal']),
|
||||
'compressed'
|
||||
)
|
||||
expect(css).toContain('.vpi-simple-icons-github')
|
||||
expect(css).not.toContain('thisiconisnotreal')
|
||||
expect(warnings).toEqual([
|
||||
expect.stringContaining(
|
||||
'"thisiconisnotreal" was not found in the "simple-icons"'
|
||||
)
|
||||
])
|
||||
})
|
||||
|
||||
test('warns on uninstalled collections with an install hint', async () => {
|
||||
const { css, warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['notinstalled:foo']),
|
||||
'compressed'
|
||||
)
|
||||
expect(css).toBe('')
|
||||
expect(warnings).toEqual([
|
||||
expect.stringContaining('@iconify-json/notinstalled')
|
||||
])
|
||||
})
|
||||
|
||||
test('warns on invalid names', async () => {
|
||||
const { warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['Not A Name']),
|
||||
'compressed'
|
||||
)
|
||||
expect(warnings).toEqual([
|
||||
expect.stringContaining('"Not A Name" is not a valid icon name')
|
||||
])
|
||||
})
|
||||
|
||||
test('returns empty css for an empty set', async () => {
|
||||
const { css, warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(),
|
||||
'compressed'
|
||||
)
|
||||
expect(css).toBe('')
|
||||
expect(warnings).toEqual([])
|
||||
})
|
||||
})
|
||||
|
||||
describe('resolveIconSVG', () => {
|
||||
test('resolves an svg offline', async () => {
|
||||
const resolved = await resolveIconSVG(e2eRoot, 'lucide', 'heart')
|
||||
expect(resolved).toHaveProperty('svg')
|
||||
const svg = (resolved as { svg: string }).svg
|
||||
expect(svg).toContain('<svg')
|
||||
expect(svg).toContain('viewBox')
|
||||
})
|
||||
|
||||
test('reports missing icons and collections distinctly', async () => {
|
||||
expect(await resolveIconSVG(e2eRoot, 'lucide', 'noicon')).toEqual({
|
||||
error: expect.stringContaining('was not found in the "lucide"')
|
||||
})
|
||||
expect(await resolveIconSVG(e2eRoot, 'nocollection', 'x')).toEqual({
|
||||
error: expect.stringContaining('@iconify-json/nocollection')
|
||||
})
|
||||
expect(await resolveIconSVG(e2eRoot, 'Bad Name', 'x')).toEqual({
|
||||
error: expect.stringContaining('not a valid icon name')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,82 @@
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
toValue,
|
||||
useSSRContext,
|
||||
watchPostEffect,
|
||||
type ComputedRef,
|
||||
type MaybeRefOrGetter
|
||||
} from 'vue'
|
||||
|
||||
import { parseIconName, type SSGContext } from '../../shared'
|
||||
import { withBase } from '../utils'
|
||||
|
||||
/**
|
||||
* Resolves an icon name (`collection:name`, e.g. `simple-icons:github`) to
|
||||
* its `vpi-<collection>-<name>` class. During SSR the name is registered so
|
||||
* the build emits its CSS rule; in dev the SVG is served on demand and
|
||||
* applied to `el` inline.
|
||||
*/
|
||||
export function useIcon(
|
||||
icon: MaybeRefOrGetter<string | { svg: string } | undefined>,
|
||||
el?: MaybeRefOrGetter<HTMLElement | null>
|
||||
): ComputedRef<string | undefined> {
|
||||
const parsed = computed(() => {
|
||||
const value = toValue(icon)
|
||||
return typeof value === 'string' ? parseIconName(value) : null
|
||||
})
|
||||
|
||||
const iconClass = computed(() =>
|
||||
parsed.value
|
||||
? `vpi-${parsed.value.collection}-${parsed.value.icon}`
|
||||
: undefined
|
||||
)
|
||||
|
||||
if (import.meta.env.SSR) {
|
||||
const ctx = useSSRContext<SSGContext>()
|
||||
const value = toValue(icon)
|
||||
// unparseable names are registered too — the build warns about them
|
||||
if (typeof value === 'string') ctx?.vpIcons.add(value)
|
||||
} else if (import.meta.env.DEV) {
|
||||
// dev has no generated stylesheet — the icon is always fetched from the
|
||||
// dev server, re-resolved when the name changes
|
||||
let applied: string | undefined
|
||||
onMounted(() => {
|
||||
watchPostEffect(() => {
|
||||
const span = toValue(el)
|
||||
if (!span) return
|
||||
const name = parsed.value
|
||||
if (!name) {
|
||||
if (applied) {
|
||||
span.style.removeProperty('--icon')
|
||||
applied = undefined
|
||||
}
|
||||
return
|
||||
}
|
||||
const key = `${name.collection}/${name.icon}`
|
||||
if (applied === key) return
|
||||
applied = key
|
||||
span.style.setProperty(
|
||||
'--icon',
|
||||
`url('${withBase(`/_vpi/${name.collection}/${name.icon}.svg`)}')`
|
||||
)
|
||||
// inline the mask setup for themes without the default icon rules
|
||||
const styles = getComputedStyle(span)
|
||||
if ((styles.maskImage || styles.webkitMaskImage) === 'none') {
|
||||
Object.assign(span.style, {
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
mask: 'var(--icon) no-repeat',
|
||||
webkitMask: 'var(--icon) no-repeat',
|
||||
maskSize: '100% 100%',
|
||||
webkitMaskSize: '100% 100%',
|
||||
backgroundColor: 'currentColor'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return iconClass
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useIcon } from 'vitepress'
|
||||
import { useTemplateRef } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
icon: string | { svg: string }
|
||||
}>()
|
||||
|
||||
const el = useTemplateRef('el')
|
||||
const iconClass = useIcon(() => props.icon, el)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="typeof icon === 'object'" class="VPIcon" v-html="icon.svg"></span>
|
||||
<span v-else ref="el" :class="iconClass"></span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPIcon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.VPIcon :deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,159 @@
|
||||
import { createRequire } from 'node:module'
|
||||
|
||||
import { getIconData, iconToHTML, iconToSVG } from '@iconify/utils'
|
||||
import { formatCSS } from '@iconify/utils/lib/css/format'
|
||||
import { getIconsCSSData } from '@iconify/utils/lib/css/icons'
|
||||
import { loadCollectionFromFS } from '@iconify/utils/lib/loader/fs'
|
||||
|
||||
import { dependencies } from '../../package.json' with { type: 'json' }
|
||||
import { parseIconName } from './shared'
|
||||
|
||||
type IconifyJSON = Parameters<typeof getIconsCSSData>[0]
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
|
||||
// collections vitepress itself depends on, resolvable even when the project
|
||||
// doesn't install them
|
||||
const ownCollections = new Set(
|
||||
Object.keys(dependencies)
|
||||
.filter((dep) => dep.startsWith('@iconify-json/'))
|
||||
.map((dep) => dep.slice('@iconify-json/'.length))
|
||||
)
|
||||
|
||||
/**
|
||||
* Placeholder for the stylesheet's content hash, replaced once all pages
|
||||
* have rendered and the icon set is complete.
|
||||
*/
|
||||
export const VP_ICONS_HASH_PLACEHOLDER = '__VP_ICONS_HASH__'
|
||||
|
||||
export function vpIconsFileName(hash: string): string {
|
||||
return `vp-icons.${hash}.css`
|
||||
}
|
||||
|
||||
// mirrors theme-default/styles/icons.css at zero specificity, so any theme's
|
||||
// rules win and duplication is inert; the `--icon` default keeps unresolved
|
||||
// icons invisible instead of solid currentColor boxes
|
||||
const BASE_RULES =
|
||||
":where([class^='vpi-'],[class*=' vpi-'])" +
|
||||
`{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");` +
|
||||
'display:inline-block;width:1em;height:1em}' +
|
||||
":where([class^='vpi-']:not(.bg),[class*=' vpi-']:not(.bg))" +
|
||||
'{-webkit-mask:var(--icon) no-repeat;mask:var(--icon) no-repeat;' +
|
||||
'-webkit-mask-size:100% 100%;mask-size:100% 100%;' +
|
||||
'background-color:currentColor;color:inherit}'
|
||||
|
||||
export interface IconsCSSResult {
|
||||
/** empty string when no icon resolved */
|
||||
css: string
|
||||
warnings: string[]
|
||||
}
|
||||
|
||||
const collectionCache = new Map<string, Promise<IconifyJSON | undefined>>()
|
||||
|
||||
async function loadCollection(
|
||||
name: string,
|
||||
root: string
|
||||
): Promise<IconifyJSON | undefined> {
|
||||
const key = `${root}\0${name}`
|
||||
let cached = collectionCache.get(key)
|
||||
if (!cached) {
|
||||
// falls back to vitepress's own dependencies for the collections it ships
|
||||
cached = loadCollectionFromFS(name, false, '@iconify-json', root)
|
||||
.catch(() => undefined)
|
||||
.then(
|
||||
(data) =>
|
||||
data ??
|
||||
(ownCollections.has(name)
|
||||
? require(`@iconify-json/${name}/icons.json`)
|
||||
: undefined)
|
||||
)
|
||||
collectionCache.set(key, cached)
|
||||
// don't cache misses — the collection may be installed during dev
|
||||
cached.then((data) => {
|
||||
if (!data) collectionCache.delete(key)
|
||||
})
|
||||
}
|
||||
return cached
|
||||
}
|
||||
|
||||
const collectionMissingMessage = (collection: string) =>
|
||||
`icon collection "${collection}" is not installed — ` +
|
||||
`run \`npm add -D @iconify-json/${collection}\` in your project`
|
||||
|
||||
const iconMissingMessage = (collection: string, icon: string) =>
|
||||
`icon "${icon}" was not found in the "${collection}" collection — ` +
|
||||
`check https://icones.js.org/collection/${collection} for valid names.`
|
||||
|
||||
export async function generateIconsCSS(
|
||||
root: string,
|
||||
icons: Set<string>,
|
||||
format: 'expanded' | 'compressed'
|
||||
): Promise<IconsCSSResult> {
|
||||
const warnings: string[] = []
|
||||
const byCollection = new Map<string, Set<string>>()
|
||||
|
||||
for (const raw of icons) {
|
||||
const parsed = parseIconName(raw)
|
||||
if (!parsed) {
|
||||
warnings.push(
|
||||
!raw.includes(':') && parseIconName(`x:${raw}`)
|
||||
? `"${raw}" has no collection prefix — write it as ` +
|
||||
`"<collection>:${raw}" (e.g. "simple-icons:${raw}"). Only ` +
|
||||
`\`socialLinks\` qualifies bare names automatically.`
|
||||
: `"${raw}" is not a valid icon name and was skipped.`
|
||||
)
|
||||
continue
|
||||
}
|
||||
let names = byCollection.get(parsed.collection)
|
||||
if (!names) byCollection.set(parsed.collection, (names = new Set()))
|
||||
names.add(parsed.icon)
|
||||
}
|
||||
|
||||
const chunks: string[] = []
|
||||
|
||||
for (const collection of Array.from(byCollection.keys()).sort()) {
|
||||
const data = await loadCollection(collection, root)
|
||||
const names = Array.from(byCollection.get(collection)!).sort()
|
||||
if (!data) {
|
||||
warnings.push(
|
||||
`${collectionMissingMessage(collection)} (needed by: ${names.join(', ')})`
|
||||
)
|
||||
continue
|
||||
}
|
||||
const found = names.filter((name) => {
|
||||
if (getIconData(data, name)) return true
|
||||
warnings.push(iconMissingMessage(collection, name))
|
||||
return false
|
||||
})
|
||||
if (!found.length) continue
|
||||
const cssData = getIconsCSSData(data, found, {
|
||||
iconSelector: '.vpi-{prefix}-{name}',
|
||||
varName: 'icon',
|
||||
format,
|
||||
mode: 'mask'
|
||||
})
|
||||
chunks.push(formatCSS(cssData.css, format))
|
||||
}
|
||||
|
||||
return {
|
||||
css: chunks.length ? BASE_RULES + '\n' + chunks.join('') : '',
|
||||
warnings
|
||||
}
|
||||
}
|
||||
|
||||
/** single-icon SVG for the dev-server endpoint */
|
||||
export async function resolveIconSVG(
|
||||
root: string,
|
||||
collection: string,
|
||||
icon: string
|
||||
): Promise<{ svg: string } | { error: string }> {
|
||||
if (!parseIconName(`${collection}:${icon}`)) {
|
||||
return { error: `"${collection}:${icon}" is not a valid icon name.` }
|
||||
}
|
||||
const data = await loadCollection(collection, root)
|
||||
if (!data) return { error: collectionMissingMessage(collection) }
|
||||
const iconData = getIconData(data, icon)
|
||||
if (!iconData) return { error: iconMissingMessage(collection, icon) }
|
||||
const built = iconToSVG(iconData)
|
||||
return { svg: iconToHTML(built.body, built.attributes) }
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import c from 'picocolors'
|
||||
import type { Plugin } from 'vite'
|
||||
|
||||
import { resolveIconSVG } from '../icons'
|
||||
import type { SiteConfig } from '../siteConfig'
|
||||
|
||||
const iconRequestRE = /\/_vpi\/([a-z0-9-]+)\/([a-z0-9-]+)\.svg$/
|
||||
|
||||
/**
|
||||
* Serves `/_vpi/<collection>/<name>.svg` in dev from locally installed
|
||||
* `@iconify-json/*` collections (requested on demand by `useIcon`).
|
||||
*/
|
||||
export function iconsPlugin(siteConfig: SiteConfig): Plugin {
|
||||
const warned = new Set<string>()
|
||||
return {
|
||||
name: 'vitepress:icons',
|
||||
configureServer(server) {
|
||||
server.middlewares.use(async (req, res, next) => {
|
||||
const match = req.url?.split('?')[0].match(iconRequestRE)
|
||||
if (!match) return next()
|
||||
const [, collection, icon] = match
|
||||
const resolved = await resolveIconSVG(siteConfig.root, collection, icon)
|
||||
if ('svg' in resolved) {
|
||||
res.setHeader('Content-Type', 'image/svg+xml')
|
||||
res.setHeader('Cache-Control', 'no-cache')
|
||||
res.end(resolved.svg)
|
||||
} else {
|
||||
const key = `${collection}:${icon}`
|
||||
if (!warned.has(key)) {
|
||||
warned.add(key)
|
||||
siteConfig.logger.warn(c.yellow(`(icons) ${resolved.error}`))
|
||||
}
|
||||
res.statusCode = 404
|
||||
res.end()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue