mirror of https://github.com/vuejs/vitepress
- emit the collected icon CSS as a fingerprinted assets/vp-icons.<hash>.css that rides assetsBase and immutable caching; pages render a placeholder href that a post-render pass substitutes, or strips entirely on zero-icon sites (#4869) - resolve icons in dev from locally installed collections through a /@vpicons/ middleware instead of api.iconify.design (#5102); the runtime API fallback is removed everywhere and missing icons warn at build time with install hints - icon names generalize to `collection:name` for any installed @iconify-json/* package, in socialLinks and anywhere else; new VPIcon theme component, useIcon composable, documented vpIcons SSG channel and an icons.include site option for client-only renders BREAKING CHANGE: `vpSocialIcons` on the SSG context is replaced by `vpIcons`; generated icon classes rename from `vpi-social-<name>` to `vpi-<collection>-<name>`; the unhashed root `vp-icons.css` is gone; icons missing from locally installed collections no longer resolve at runtime via api.iconify.design. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>pull/5407/head
Divyansh Singh
2 weeks ago
parent
d3b2957db0
commit
509553667e
@ -0,0 +1,162 @@
|
||||
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('/@vpicons/')) 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(
|
||||
'/@vpicons/'
|
||||
)
|
||||
})
|
||||
expect(
|
||||
devIconRequests.some((url) =>
|
||||
url.includes('/@vpicons/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="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,157 @@
|
||||
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('bare names resolve in simple-icons', () => {
|
||||
expect(parseIconName('github')).toEqual({
|
||||
collection: 'simple-icons',
|
||||
icon: 'github'
|
||||
})
|
||||
})
|
||||
|
||||
test('prefixed names resolve in their collection', () => {
|
||||
expect(parseIconName('lucide:heart')).toEqual({
|
||||
collection: 'lucide',
|
||||
icon: 'heart'
|
||||
})
|
||||
})
|
||||
|
||||
test('rejects names outside iconify grammar', () => {
|
||||
for (const name of [
|
||||
'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 () => {
|
||||
const { css, warnings } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['github']),
|
||||
'compressed'
|
||||
)
|
||||
expect(warnings).toEqual([])
|
||||
expect(css).toContain(
|
||||
'.vpi-simple-icons-github{--icon:url("data:image/svg+xml'
|
||||
)
|
||||
expect(css).toContain('simple-icons (CC0 1.0)')
|
||||
expect(css).toContain(":where([class^='vpi-']")
|
||||
expect(css).toContain('display:inline-block')
|
||||
expect(css).not.toContain('.vpi-social')
|
||||
})
|
||||
|
||||
test('credits simple-icons only when it contributed rules', async () => {
|
||||
const { css } = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['notarealiconname', 'lucide:heart']),
|
||||
'compressed'
|
||||
)
|
||||
expect(css).toContain('.vpi-lucide-heart')
|
||||
expect(css).not.toContain('simple-icons (CC0 1.0)')
|
||||
})
|
||||
|
||||
test('groups collections and stays deterministic across insertion order', async () => {
|
||||
const a = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['lucide:heart', 'github', 'lucide:egg']),
|
||||
'compressed'
|
||||
)
|
||||
const b = await generateIconsCSS(
|
||||
e2eRoot,
|
||||
new Set(['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(['github', '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,88 @@
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
toValue,
|
||||
useSSRContext,
|
||||
watchPostEffect,
|
||||
type ComputedRef,
|
||||
type MaybeRefOrGetter
|
||||
} from 'vue'
|
||||
|
||||
import { parseIconName, type SSGContext } from '../../shared'
|
||||
import { withBase } from '../utils'
|
||||
|
||||
/**
|
||||
* Renders an iconify icon through vitepress's icon pipeline: during SSR the
|
||||
* name is registered so the build emits its CSS rule; in dev the icon is
|
||||
* resolved from locally installed collections, without network access.
|
||||
*
|
||||
* Accepts `name` (resolved in simple-icons) or `collection:name` for any
|
||||
* `@iconify-json/*` collection installed in the project. Returns the class
|
||||
* to render (`vpi-<collection>-<name>`); pass the template ref of the
|
||||
* element carrying it so dev can apply the on-demand fallback.
|
||||
*/
|
||||
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, so a `vpi-<collection>-<name>` class
|
||||
// never has a rule — the icon always comes from the dev server, tracked
|
||||
// per name so a reactive icon prop re-resolves
|
||||
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(`/@vpicons/${name.collection}/${name.icon}.svg`)}')`
|
||||
)
|
||||
// a theme without the default theme's icon rules gets the mask
|
||||
// machinery inline, so dev works before any styling exists
|
||||
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,35 @@
|
||||
<script lang="ts" setup>
|
||||
import { useIcon } from 'vitepress'
|
||||
import { useTemplateRef } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
/**
|
||||
* `name` (a simple-icons name) or `collection:name` for any
|
||||
* `@iconify-json/*` collection installed in the project, or a raw
|
||||
* `{ svg }` string.
|
||||
*/
|
||||
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,156 @@
|
||||
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 { DEFAULT_ICONS_COLLECTION, parseIconName } from './shared'
|
||||
|
||||
type IconifyJSON = Parameters<typeof getIconsCSSData>[0]
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
|
||||
/**
|
||||
* Replaced with the content hash (or stripped together with the link tag when
|
||||
* no icons are used) after all pages have rendered — the icon set, and hence
|
||||
* the hash, is only complete once every page's SSR pass has run.
|
||||
*/
|
||||
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; always emitted — no reliable way exists to tell whether a
|
||||
// bundle carries the default theme's copy, and duplication is inert. The
|
||||
// `--icon` default keeps an unresolved icon invisible instead of painting a
|
||||
// solid currentColor box.
|
||||
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> {
|
||||
if (name === DEFAULT_ICONS_COLLECTION) {
|
||||
// vitepress's own dependency — the user's root may not resolve it
|
||||
return require('@iconify-json/simple-icons/icons.json')
|
||||
}
|
||||
const key = `${root}\0${name}`
|
||||
let cached = collectionCache.get(key)
|
||||
if (!cached) {
|
||||
cached = loadCollectionFromFS(name, false, '@iconify-json', root).catch(
|
||||
() => undefined
|
||||
)
|
||||
collectionCache.set(key, cached)
|
||||
// don't memoize a miss — the user may install the collection while the
|
||||
// dev server is running
|
||||
cached.then((data) => {
|
||||
if (!data) collectionCache.delete(key)
|
||||
})
|
||||
}
|
||||
return cached
|
||||
}
|
||||
|
||||
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}" 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[] = []
|
||||
let hasSimpleIcons = false
|
||||
|
||||
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
|
||||
// no commonSelector: `css` then holds only per-icon rules, and the
|
||||
// common declarations land in `common`, which the theme's static rules
|
||||
// (or BASE_RULES) replace
|
||||
const cssData = getIconsCSSData(data, found, {
|
||||
iconSelector: '.vpi-{prefix}-{name}',
|
||||
varName: 'icon',
|
||||
format,
|
||||
mode: 'mask'
|
||||
})
|
||||
chunks.push(formatCSS(cssData.css, format))
|
||||
if (collection === DEFAULT_ICONS_COLLECTION) hasSimpleIcons = true
|
||||
}
|
||||
|
||||
if (!chunks.length) return { css: '', warnings }
|
||||
|
||||
const attribution = hasSimpleIcons
|
||||
? '/* simple-icons (CC0 1.0) — https://simpleicons.org */\n'
|
||||
: ''
|
||||
|
||||
return {
|
||||
css: attribution + BASE_RULES + '\n' + chunks.join(''),
|
||||
warnings
|
||||
}
|
||||
}
|
||||
|
||||
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.`
|
||||
|
||||
/** 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,41 @@
|
||||
import c from 'picocolors'
|
||||
import type { Plugin } from 'vite'
|
||||
|
||||
import { resolveIconSVG } from '../icons'
|
||||
import type { SiteConfig } from '../siteConfig'
|
||||
|
||||
const iconRequestRE = /\/@vpicons\/([a-z0-9-]+)\/([a-z0-9-]+)\.svg$/
|
||||
|
||||
/**
|
||||
* Serves `/@vpicons/<collection>/<name>.svg` in dev from locally installed
|
||||
* `@iconify-json/*` collections, so icons render without the generated
|
||||
* stylesheet and without any network access (the `useIcon` composable
|
||||
* requests these on demand).
|
||||
*/
|
||||
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