sync

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>
 `