sync

integration/apps/standalone-vite/src/generated-contract.typecheck.ts

@@ -0,0 +1,9 @@
+import type { IconsIconElement } from './sprite'
+
+const icon = document.createElement('icons-icon')
+const typedIcon: IconsIconElement = icon
+
+typedIcon.icon = 'check'
+
+// @ts-expect-error Generated icon names form a literal union.
+typedIcon.icon = 'missing'

integration/apps/standalone-vite/src/main.ts

@@ -1,7 +1,7 @@
 import '@gromlab/svg-sprites/viewer/element'
 import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
 import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
-import { getIconsIconHref, iconsSpriteUrl } from './sprite'
+import { defineIconsIconElement, iconsSpriteUrl } from './sprite'
 import './style.css'
 
 const check = spriteManifest.icons.find((icon) => icon.name === 'check')
@@ -9,16 +9,17 @@ if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
   throw new Error('Generated Vite facade and manifest disagree.')
 }
 
+defineIconsIconElement()
+
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <h1>Standalone + Vite</h1>
-  <svg
+  <icons-icon
     data-testid="icon"
     data-app="standalone-vite"
-    viewBox="${check.viewBox ?? '0 0 24 24'}"
+    icon="check"
+    role="img"
     aria-label="Check icon"
-  >
-    <use href="${getIconsIconHref('check')}"></use>
-  </svg>
+  ></icons-icon>
   <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
 

integration/apps/standalone-vite/src/sprite/index.ts

@@ -1,7 +1,9 @@
 export {
+  defineIconsIconElement,
   getIconsIconHref,
   iconsIconIds,
   iconsIconNames,
+  iconsIconTagName,
   iconsSpriteUrl,
 } from './.svg-sprite/index.js'
-export type { IconsIconName } from './.svg-sprite/index.js'
+export type { IconsIconElement, IconsIconName } from './.svg-sprite/index.js'

integration/apps/standalone-vite/src/sprite/svg-sprite.config.ts

@@ -3,6 +3,6 @@ import { defineSpriteConfig } from '@gromlab/svg-sprites'
 export default defineSpriteConfig({
   mode: 'standalone@vite',
   name: 'icons',
-  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  input: '../../../../fixtures/icons/check.svg',
   generatedNotice: false,
 })