zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(icons): implement shared SVG icon system across packages

Browse Source 
- Create centralized SVG files in core icons package assets directory
- Add rollup-plugin-string to core icons for SVG file processing
- Export SVG_ICONS object from core package for cross-package sharing
- Refactor html-icons to import SVG strings from @vjs-10/icons
- Remove hardcoded SVG strings in favor of shared definitions
- Add TypeScript declarations for SVG imports

This establishes a foundation for sharing more code across the monorepo
while maintaining proper package boundaries and build system integration.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Pillsbury
2025-08-13 14:06:51 -07:00
co-authored by Claude
parent 69670e8d71
commit e0be58e094
16 changed files with 73 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/html-icons/src/media-pause-icon.ts
+2 -3
View File
@@ -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 viewBox="0 0 24 24">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</svg>
${SVG_ICONS.pause}
`;
}
packages/html/html-icons/src/media-play-icon.ts
+2 -3
View File
@@ -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);
}
</style>
<svg viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
${SVG_ICONS.play}
`;
}
packages/html/html-icons/src/media-volume-high-icon.ts
+2 -4
View File
@@ -1,8 +1,6 @@
import { MediaChromeIcon } from './media-chrome-icon.js';
const highIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.47 4.47 0 0 0 2.5-4ZM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54Z"/>
</svg>`;
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);
}
</style>
${highIcon}
${SVG_ICONS.volumeHigh}
`;
}
packages/html/html-icons/src/media-volume-low-icon.ts
+2 -4
View File
@@ -1,8 +1,6 @@
import { MediaChromeIcon } from './media-chrome-icon.js';
const lowIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.47 4.47 0 0 0 2.5-4Z"/>
</svg>`;
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);
}
</style>
${lowIcon}
${SVG_ICONS.volumeLow}
`;
}
packages/html/html-icons/src/media-volume-off-icon.ts
+2 -4
View File
@@ -1,8 +1,6 @@
import { MediaChromeIcon } from './media-chrome-icon.js';
const offIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M16.5 12A4.5 4.5 0 0 0 14 8v2.18l2.45 2.45a4.22 4.22 0 0 0 .05-.63Zm2.5 0a6.84 6.84 0 0 1-.54 2.64L20 16.15A8.8 8.8 0 0 0 21 12a9 9 0 0 0-7-8.77v2.06A7 7 0 0 1 19 12ZM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25A6.92 6.92 0 0 1 14 18.7v2.06A9 9 0 0 0 17.69 19l2 2.05L21 19.73l-9-9L4.27 3ZM12 4 9.91 6.09 12 8.18V4Z"/>
</svg>`;
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);
}
</style>
${offIcon}
${SVG_ICONS.volumeOff}
`;
}