zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 21:57:29 +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
package-lock.json
Generated
+11
View File
@@ -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"
}
packages/core/icons/assets/pause.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 113 B

packages/core/icons/assets/play.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5v14l11-7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 95 B

packages/core/icons/assets/volume-high.svg
+3
View File
@@ -0,0 +1,3 @@
<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 228 B

packages/core/icons/assets/volume-low.svg
+3
View File
@@ -0,0 +1,3 @@
<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 173 B

packages/core/icons/assets/volume-off.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 398 B

packages/core/icons/package.json
+5 -4
View File
@@ -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"
}
}
}
packages/core/icons/rollup.config.js
+7
View File
@@ -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']
}),
packages/core/icons/src/index.ts
+17
View File
@@ -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;
packages/core/icons/src/svg.d.ts
Vendored
+4
View File
@@ -0,0 +1,4 @@
declare module '*.svg' {
const content: string;
export default content;
}
packages/html/html-icons/package.json
+4 -4
View File
@@ -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"
}
}
}
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}
`;
}