diff --git a/package-lock.json b/package-lock.json index eec33a0c..37af3d2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4497,6 +4497,16 @@ "node": ">= 6" } }, + "node_modules/rollup-plugin-string": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-string/-/rollup-plugin-string-3.0.0.tgz", + "integrity": "sha512-vqyzgn9QefAgeKi+Y4A7jETeIAU1zQmS6VotH6bzm/zmUQEnYkpIGRaOBPY41oiWYV4JyBoGAaBjYMYuv+6wVw==", + "dev": true, + "license": "MIT", + "dependencies": { + "rollup-pluginutils": "^2.4.1" + } + }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", @@ -5805,6 +5815,7 @@ "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-typescript": "^11.0.0", "rollup": "^4.0.0", + "rollup-plugin-string": "^3.0.0", "tslib": "^2.6.0", "typescript": "^5.3.0" } diff --git a/packages/core/icons/assets/pause.svg b/packages/core/icons/assets/pause.svg new file mode 100644 index 00000000..556da453 --- /dev/null +++ b/packages/core/icons/assets/pause.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/core/icons/assets/play.svg b/packages/core/icons/assets/play.svg new file mode 100644 index 00000000..696ed356 --- /dev/null +++ b/packages/core/icons/assets/play.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/core/icons/assets/volume-high.svg b/packages/core/icons/assets/volume-high.svg new file mode 100644 index 00000000..4f5580be --- /dev/null +++ b/packages/core/icons/assets/volume-high.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/core/icons/assets/volume-low.svg b/packages/core/icons/assets/volume-low.svg new file mode 100644 index 00000000..09a48710 --- /dev/null +++ b/packages/core/icons/assets/volume-low.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/core/icons/assets/volume-off.svg b/packages/core/icons/assets/volume-off.svg new file mode 100644 index 00000000..d71057e7 --- /dev/null +++ b/packages/core/icons/assets/volume-off.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/core/icons/package.json b/packages/core/icons/package.json index 4909b847..317f71df 100644 --- a/packages/core/icons/package.json +++ b/packages/core/icons/package.json @@ -29,14 +29,15 @@ ], "license": "Apache-2.0", "devDependencies": { - "rollup": "^4.0.0", - "@rollup/plugin-typescript": "^11.0.0", - "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-commonjs": "^25.0.0", + "@rollup/plugin-node-resolve": "^15.0.0", + "@rollup/plugin-typescript": "^11.0.0", + "rollup": "^4.0.0", + "rollup-plugin-string": "^3.0.0", "tslib": "^2.6.0", "typescript": "^5.3.0" }, "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/packages/core/icons/rollup.config.js b/packages/core/icons/rollup.config.js index 0fe567ba..a88370aa 100644 --- a/packages/core/icons/rollup.config.js +++ b/packages/core/icons/rollup.config.js @@ -1,6 +1,7 @@ const typescript = require('@rollup/plugin-typescript'); const resolve = require('@rollup/plugin-node-resolve'); const commonjs = require('@rollup/plugin-commonjs'); +const { string } = require('rollup-plugin-string'); module.exports = [ // ESM build @@ -20,6 +21,9 @@ module.exports = [ return true; }, plugins: [ + string({ + include: '**/*.svg' + }), resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }), @@ -48,6 +52,9 @@ module.exports = [ return true; }, plugins: [ + string({ + include: '**/*.svg' + }), resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }), diff --git a/packages/core/icons/src/index.ts b/packages/core/icons/src/index.ts index 580c0d06..9a53af72 100644 --- a/packages/core/icons/src/index.ts +++ b/packages/core/icons/src/index.ts @@ -1,3 +1,20 @@ +// Import SVG files as strings +import playSvg from '../assets/play.svg'; +import pauseSvg from '../assets/pause.svg'; +import volumeHighSvg from '../assets/volume-high.svg'; +import volumeLowSvg from '../assets/volume-low.svg'; +import volumeOffSvg from '../assets/volume-off.svg'; + +// Export SVG strings directly +export const SVG_ICONS = { + play: playSvg, + pause: pauseSvg, + volumeHigh: volumeHighSvg, + volumeLow: volumeLowSvg, + volumeOff: volumeOffSvg, +} as const; + +// Legacy interface for backward compatibility export interface IconDefinition { name: string; viewBox: string; diff --git a/packages/core/icons/src/svg.d.ts b/packages/core/icons/src/svg.d.ts new file mode 100644 index 00000000..fc52f076 --- /dev/null +++ b/packages/core/icons/src/svg.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: string; + export default content; +} \ No newline at end of file diff --git a/packages/html/html-icons/package.json b/packages/html/html-icons/package.json index f8b255e1..3c99df20 100644 --- a/packages/html/html-icons/package.json +++ b/packages/html/html-icons/package.json @@ -33,14 +33,14 @@ "@vjs-10/icons": "*" }, "devDependencies": { - "rollup": "^4.0.0", - "@rollup/plugin-typescript": "^11.0.0", - "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-commonjs": "^25.0.0", + "@rollup/plugin-node-resolve": "^15.0.0", + "@rollup/plugin-typescript": "^11.0.0", + "rollup": "^4.0.0", "tslib": "^2.6.0", "typescript": "^5.3.0" }, "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/packages/html/html-icons/src/media-pause-icon.ts b/packages/html/html-icons/src/media-pause-icon.ts index c9b59b1e..75921e6a 100644 --- a/packages/html/html-icons/src/media-pause-icon.ts +++ b/packages/html/html-icons/src/media-pause-icon.ts @@ -1,11 +1,10 @@ import { MediaChromeIcon } from './media-chrome-icon.js'; +import { SVG_ICONS } from '@vjs-10/icons'; export function getTemplateHTML() { return /* html */ ` ${MediaChromeIcon.getTemplateHTML()} - - - + ${SVG_ICONS.pause} `; } diff --git a/packages/html/html-icons/src/media-play-icon.ts b/packages/html/html-icons/src/media-play-icon.ts index 03a2a76a..2e9edfbc 100644 --- a/packages/html/html-icons/src/media-play-icon.ts +++ b/packages/html/html-icons/src/media-play-icon.ts @@ -1,4 +1,5 @@ import { MediaChromeIcon } from './media-chrome-icon.js'; +import { SVG_ICONS } from '@vjs-10/icons'; export function getTemplateHTML() { return /* html */ ` @@ -8,9 +9,7 @@ export function getTemplateHTML() { display: var(--media-play-icon-display, inline-flex); } - - - + ${SVG_ICONS.play} `; } diff --git a/packages/html/html-icons/src/media-volume-high-icon.ts b/packages/html/html-icons/src/media-volume-high-icon.ts index 74df096c..b22b2b59 100644 --- a/packages/html/html-icons/src/media-volume-high-icon.ts +++ b/packages/html/html-icons/src/media-volume-high-icon.ts @@ -1,8 +1,6 @@ import { MediaChromeIcon } from './media-chrome-icon.js'; -const highIcon = ``; +import { SVG_ICONS } from '@vjs-10/icons'; export function getTemplateHTML() { return /* html */ ` @@ -12,7 +10,7 @@ export function getTemplateHTML() { display: var(--media-play-icon-display, inline-flex); } - ${highIcon} + ${SVG_ICONS.volumeHigh} `; } diff --git a/packages/html/html-icons/src/media-volume-low-icon.ts b/packages/html/html-icons/src/media-volume-low-icon.ts index c9b9b0a7..e03464b0 100644 --- a/packages/html/html-icons/src/media-volume-low-icon.ts +++ b/packages/html/html-icons/src/media-volume-low-icon.ts @@ -1,8 +1,6 @@ import { MediaChromeIcon } from './media-chrome-icon.js'; -const lowIcon = ``; +import { SVG_ICONS } from '@vjs-10/icons'; export function getTemplateHTML() { return /* html */ ` @@ -12,7 +10,7 @@ export function getTemplateHTML() { display: var(--media-play-icon-display, inline-flex); } - ${lowIcon} + ${SVG_ICONS.volumeLow} `; } diff --git a/packages/html/html-icons/src/media-volume-off-icon.ts b/packages/html/html-icons/src/media-volume-off-icon.ts index b43f2730..cae4c860 100644 --- a/packages/html/html-icons/src/media-volume-off-icon.ts +++ b/packages/html/html-icons/src/media-volume-off-icon.ts @@ -1,8 +1,6 @@ import { MediaChromeIcon } from './media-chrome-icon.js'; -const offIcon = ``; +import { SVG_ICONS } from '@vjs-10/icons'; export function getTemplateHTML() { return /* html */ ` @@ -12,7 +10,7 @@ export function getTemplateHTML() { display: var(--media-play-icon-display, inline-flex); } - ${offIcon} + ${SVG_ICONS.volumeOff} `; }