sync

integration/apps/next-app-turbopack/src/sprite/svg-sprite.config.ts

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

integration/apps/next-app-webpack/src/sprite/svg-sprite.config.ts

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

integration/apps/next-pages-turbopack/src/sprite/svg-sprite.config.ts

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

integration/apps/next-pages-webpack/src/sprite/svg-sprite.config.ts

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

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

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

integration/apps/react-webpack/src/sprite/svg-sprite.config.ts

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

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,
 })

integration/apps/standalone-webpack/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-webpack/src/main.ts

@@ -1,24 +1,25 @@
 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'
 
 const check = spriteManifest.icons.find((icon) => icon.name === 'check')
 if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
   throw new Error('Generated Webpack facade and manifest disagree.')
 }
 
+defineIconsIconElement()
+
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <h1>Standalone + Webpack</h1>
-  <svg
+  <icons-icon
     data-testid="icon"
     data-app="standalone-webpack"
-    viewBox="${check.viewBox ?? '0 0 24 24'}"
+    icon="check"
+    role="img"
     aria-label="Check icon"
     style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
-  >
-    <use href="${getIconsIconHref('check')}"></use>
-  </svg>
+  ></icons-icon>
   <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
 

integration/apps/standalone-webpack/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-webpack/src/sprite/svg-sprite.config.ts

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

integration/apps/standalone/src/sprite/.gitignore

@@ -1,2 +0,0 @@
-# @generated by @gromlab/svg-sprites. Do not edit.
-/.svg-sprite/

integration/apps/standalone/src/sprite/svg-sprite.config.json

@@ -1,6 +1,6 @@
 {
   "mode": "standalone",
   "name": "app-icons",
-  "inputFiles": ["../../../../fixtures/icons/check.svg"],
+  "input": "../../../../fixtures/icons/check.svg",
   "generatedNotice": false
 }