mirror of
https://github.com/gromlab-ru/svg-sprites.git
synced 2026-07-21 20:30:16 +03:00
feat: добавить поддержку 20 framework exact modes
Добавлены exact modes: - vue@vite и vue@webpack - nuxt@vite и nuxt@webpack - svelte@vite, svelte@webpack и sveltekit@vite - angular@application и angular@webpack - astro@vite - solid@vite, solid@webpack и solid-start@vite - preact@vite и preact@webpack - qwik@vite - lit@vite и lit@webpack - alpine@vite и alpine@webpack Для каждого mode реализованы изолированный adapter, нативный framework-компонент, declarations, manifest, CSS и внешний asset URL. Добавлены production integration-стенды с генерацией, typecheck, сборкой и Playwright-проверкой рендера спрайта и Viewer. Обновлены Viewer, RU/EN-гайды, README, technical reference и AI skills. Итоговая матрица включает 29 exact modes. Проверки: - 48 unit-тестов - 29 integration E2E-тестов
This commit is contained in:
26
AGENTS.md
26
AGENTS.md
@@ -13,7 +13,27 @@
|
||||
- `standalone`;
|
||||
- `standalone@vite`;
|
||||
- `standalone@webpack`;
|
||||
- будущие `vue@*` и другие modes.
|
||||
- `vue@vite`;
|
||||
- `vue@webpack`;
|
||||
- `nuxt@vite`;
|
||||
- `nuxt@webpack`;
|
||||
- `svelte@vite`;
|
||||
- `svelte@webpack`;
|
||||
- `sveltekit@vite`;
|
||||
- `angular@application`;
|
||||
- `angular@webpack`;
|
||||
- `astro@vite`;
|
||||
- `solid@vite`;
|
||||
- `solid@webpack`;
|
||||
- `solid-start@vite`;
|
||||
- `preact@vite`;
|
||||
- `preact@webpack`;
|
||||
- `qwik@vite`;
|
||||
- `lit@vite`;
|
||||
- `lit@webpack`;
|
||||
- `alpine@vite`;
|
||||
- `alpine@webpack`;
|
||||
- будущие exact modes.
|
||||
|
||||
Для каждого exact mode используется отдельный каталог `src/modes/<mode-slug>/`. Adapter самостоятельно определяет:
|
||||
|
||||
@@ -59,7 +79,9 @@ Core не генерирует JavaScript, declarations, manifest source, CSS и
|
||||
|
||||
Один config разрешается ровно в один mode и один output. Множественные modes не генерируются в один root; orchestration выполняется независимыми config/API/CLI вызовами.
|
||||
|
||||
Runtime генерируется как ESM JavaScript. Типизация добавляется отдельными `.d.ts`; TypeScript/TSX не используется как runtime output.
|
||||
Каждый adapter генерирует один нативный для фреймворка runtime-контракт, совместимый со стандартными JavaScript- и TypeScript-конфигурациями этого фреймворка. Предпочтительный output — ESM JavaScript; если framework compiler требует собственный формат, допускаются framework-native контейнеры с JavaScript-синтаксисом (`.jsx`, `.svelte`, `.astro` и аналогичные). `.tsx` и TypeScript runtime запрещены, кроме frameworks вроде Angular, чей штатный production toolchain требует TypeScript. Типизация всегда добавляется отдельными `.d.ts`; отдельные JS- и TS-реализации одного компонента не создаются.
|
||||
|
||||
Integration-стенд должен собирать runtime как JavaScript-потребитель без дополнительной TypeScript-настройки, когда framework это допускает. TypeScript-совместимость того же generated API проверяется отдельным type probe внутри стенда. Framework-native adapter нельзя подменять consumer-примером другого mode или Web Component facade.
|
||||
|
||||
Core writer полностью владеет каталогом `.svg-sprite` и при каждой генерации заменяет его через временный каталог с rollback при ошибке. Корневым `.gitignore` writer владеет, когда exact-mode adapter запрашивает его через `OutputPlan`. Bare `standalone` не создаёт `.gitignore`; остальные modes создают.
|
||||
|
||||
|
||||
10
FEATURES.md
10
FEATURES.md
@@ -1,12 +1,12 @@
|
||||
# Иконки без лишней цены для приложения
|
||||
|
||||
`@gromlab/svg-sprites` превращает SVG проекта в кешируемую, типизированную систему иконок для vanilla-приложений, React и Next.js. В коде остаются простые компоненты, а приложение получает преимущества спрайтов без сложной инфраструктуры.
|
||||
`@gromlab/svg-sprites` превращает SVG проекта в кешируемую, типизированную систему иконок для современных web frameworks. В коде остаются нативные компоненты выбранного стека, а приложение получает преимущества спрайтов без сложной инфраструктуры.
|
||||
|
||||
1. **AI-friendly из коробки**
|
||||
|
||||
`@gromlab/svg-sprites` сразу рассчитан на работу с AI-агентами. Подключите готовый skill и поручите агенту настройку, миграцию или диагностику без длинных инструкций и ручного изучения документации.
|
||||
|
||||
2. **Типизированный React-компонент с автокомплитом**
|
||||
2. **Типизированный нативный компонент с автокомплитом**
|
||||
|
||||
Каждый спрайт получает собственный готовый компонент. Prop `icon` формируется из реальных имён SVG, поэтому редактор показывает точный список доступных иконок, а TypeScript сразу обнаруживает опечатки. Не нужно вручную поддерживать компоненты, union-типы или реестр имён.
|
||||
|
||||
@@ -40,11 +40,11 @@
|
||||
|
||||
10. **SpriteViewer: все спрайты на одной debug-странице**
|
||||
|
||||
`SpriteViewer` рендерит все спрайты проекта в одном месте и показывает, какие иконки вошли в каждый набор и как они выглядят. Для каждой иконки видны созданные CSS-переменные и их fallback-цвета. Значения можно менять прямо в Viewer и сразу наблюдать результат. Здесь же доступны готовые примеры подключения через React, `<svg><use>`, `<img>` и CSS.
|
||||
`SpriteViewer` рендерит все спрайты проекта в одном месте и показывает, какие иконки вошли в каждый набор и как они выглядят. Для каждой иконки видны созданные CSS-переменные и их fallback-цвета. Значения можно менять прямо в Viewer и сразу наблюдать результат. Здесь же доступны готовые примеры для framework из manifest, `<svg><use>`, `<img>` и CSS.
|
||||
|
||||
11. **Standalone, React и Next.js**
|
||||
11. **29 exact modes**
|
||||
|
||||
Для vanilla-приложений с Vite или Webpack пакет генерирует нативный типизированный Web Component без runtime-зависимостей. Для React и Next.js создаётся React-компонент с поддержкой Vite, Webpack 5, App Router, Pages Router и Turbopack.
|
||||
Изолированные adapters создают нативные компоненты для standalone, React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Astro, Solid, SolidStart, Preact, Qwik, Lit и Alpine.js. Каждый exact mode учитывает свой Vite, Webpack, Turbopack или application-builder контракт.
|
||||
|
||||
12. **Чистый Git**
|
||||
|
||||
|
||||
78
MODES_CHECKLIST.md
Normal file
78
MODES_CHECKLIST.md
Normal file
@@ -0,0 +1,78 @@
|
||||
# Exact Mode Checklist
|
||||
|
||||
Mode отмечается поддержанным только после завершения полного вертикального среза:
|
||||
|
||||
- реализован независимый adapter в `src/modes/<mode-slug>/`;
|
||||
- добавлен один integration-стенд для exact mode;
|
||||
- production build стенда успешно рендерит иконку из внешнего SVG-спрайта;
|
||||
- Viewer на стенде загружает тот же спрайт и проходит адресный E2E;
|
||||
- добавлены быстрые старты на русском и английском языках;
|
||||
- ссылки на быстрые старты добавлены в `README_RU.md` и `README.md`.
|
||||
|
||||
## Standalone
|
||||
|
||||
- [x] `standalone`
|
||||
- [x] `standalone@vite`
|
||||
- [x] `standalone@webpack`
|
||||
|
||||
## React
|
||||
|
||||
- [x] `react@vite`
|
||||
- [x] `react@webpack`
|
||||
|
||||
## Next.js
|
||||
|
||||
- [x] `next@app/turbopack`
|
||||
- [x] `next@app/webpack`
|
||||
- [x] `next@pages/turbopack`
|
||||
- [x] `next@pages/webpack`
|
||||
|
||||
## Vue
|
||||
|
||||
- [x] `vue@vite`
|
||||
- [x] `vue@webpack`
|
||||
|
||||
## Nuxt
|
||||
|
||||
- [x] `nuxt@vite`
|
||||
- [x] `nuxt@webpack`
|
||||
|
||||
## Svelte
|
||||
|
||||
- [x] `svelte@vite`
|
||||
- [x] `svelte@webpack`
|
||||
- [x] `sveltekit@vite`
|
||||
|
||||
## Angular
|
||||
|
||||
- [x] `angular@application`
|
||||
- [x] `angular@webpack`
|
||||
|
||||
## Astro
|
||||
|
||||
- [x] `astro@vite`
|
||||
|
||||
## Solid
|
||||
|
||||
- [x] `solid@vite`
|
||||
- [x] `solid@webpack`
|
||||
- [x] `solid-start@vite`
|
||||
|
||||
## Preact
|
||||
|
||||
- [x] `preact@vite`
|
||||
- [x] `preact@webpack`
|
||||
|
||||
## Qwik
|
||||
|
||||
- [x] `qwik@vite`
|
||||
|
||||
## Lit
|
||||
|
||||
- [x] `lit@vite`
|
||||
- [x] `lit@webpack`
|
||||
|
||||
## Alpine.js
|
||||
|
||||
- [x] `alpine@vite`
|
||||
- [x] `alpine@webpack`
|
||||
37
README.md
37
README.md
@@ -6,7 +6,7 @@
|
||||
|
||||
`@gromlab/svg-sprites` is an SVG sprite generator for modern web applications. It combines selected SVG icons into one or more external, cacheable sprites and prepares them for use in the UI.
|
||||
|
||||
For vanilla applications using Vite/Webpack, the package generates a native typed Web Component; for React and Next.js, it generates a React component. In every case, the SVG remains a separate cacheable asset.
|
||||
Each exact mode generates a native typed component for its framework and bundler: Web Component, React, Vue, Svelte, Angular, Astro, Solid, Preact, Qwik, Lit, or Alpine.js. In every case, the SVG remains a separate cacheable asset.
|
||||
|
||||
## An SVG sprite as simple as a regular SVG icon
|
||||
|
||||
@@ -205,26 +205,21 @@ Create themes, states, and hover effects without editing the SVG or making addit
|
||||
|
||||
## SpriteViewer: every sprite on one debug page
|
||||
|
||||
`SpriteViewer` renders all standalone, React, and Next.js project sprites in one place. One Web Component owns the visuals, while React uses a thin bridge to it.
|
||||
`SpriteViewer` renders sprites from every supported exact mode in one place. One Web Component owns the visuals, while React also provides a thin bridge to it.
|
||||
|
||||
For each icon, you can see the generated CSS variables and their fallback colors. Change the values directly in the Viewer and see the result immediately.
|
||||
|
||||
It also provides ready-to-use integration examples for:
|
||||
|
||||
- React;
|
||||
- `<svg><use>`;
|
||||
- `<img>`;
|
||||
- CSS.
|
||||
It also provides ready-to-use examples for the manifest's framework, `<svg><use>`, `<img>`, and CSS.
|
||||
|
||||
|
||||
|
||||
The Viewer is added only to an internal debug page and does not become part of the generated icon components.
|
||||
|
||||
With bare standalone, the application loads the Viewer as a browser script and HTML element; bundler modes use the npm entry, while React and Next.js import `SpriteViewer` from `@gromlab/svg-sprites/react`.
|
||||
With bare standalone, the application loads the Viewer as a browser script and HTML element. Bundler and framework modes use the npm Web Component entry; React and Next.js may instead import the bridge from `@gromlab/svg-sprites/react`.
|
||||
|
||||
## Standalone, React, and Next.js
|
||||
## 29 exact modes
|
||||
|
||||
The package generates low-level standalone sprites for static HTML, Vite, and Webpack 5, plus typed React components for React and Next.js.
|
||||
The package provides isolated contracts for standalone, React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Astro, Solid, SolidStart, Preact, Qwik, Lit, and Alpine.js across their supported Vite, Webpack, Turbopack, and application-builder variants.
|
||||
|
||||
## Clean Git history
|
||||
|
||||
@@ -249,6 +244,26 @@ This README introduces the project's capabilities and demonstrates the primary u
|
||||
- [Standalone + Webpack 5](docs/en/guides/standalone-webpack.md)
|
||||
- [React + Vite](docs/en/guides/react-vite.md)
|
||||
- [React + Webpack 5](docs/en/guides/react-webpack.md)
|
||||
- [Vue + Vite](docs/en/guides/vue-vite.md)
|
||||
- [Vue + Webpack](docs/en/guides/vue-webpack.md)
|
||||
- [Nuxt + Vite](docs/en/guides/nuxt-vite.md)
|
||||
- [Nuxt + Webpack](docs/en/guides/nuxt-webpack.md)
|
||||
- [Svelte + Vite](docs/en/guides/svelte-vite.md)
|
||||
- [Svelte + Webpack](docs/en/guides/svelte-webpack.md)
|
||||
- [SvelteKit + Vite](docs/en/guides/sveltekit-vite.md)
|
||||
- [Angular application builder](docs/en/guides/angular-application.md)
|
||||
- [Angular + Webpack](docs/en/guides/angular-webpack.md)
|
||||
- [Astro + Vite](docs/en/guides/astro-vite.md)
|
||||
- [Solid + Vite](docs/en/guides/solid-vite.md)
|
||||
- [Solid + Webpack](docs/en/guides/solid-webpack.md)
|
||||
- [SolidStart + Vite](docs/en/guides/solid-start-vite.md)
|
||||
- [Preact + Vite](docs/en/guides/preact-vite.md)
|
||||
- [Preact + Webpack](docs/en/guides/preact-webpack.md)
|
||||
- [Qwik + Vite](docs/en/guides/qwik-vite.md)
|
||||
- [Lit + Vite](docs/en/guides/lit-vite.md)
|
||||
- [Lit + Webpack](docs/en/guides/lit-webpack.md)
|
||||
- [Alpine.js + Vite](docs/en/guides/alpine-vite.md)
|
||||
- [Alpine.js + Webpack](docs/en/guides/alpine-webpack.md)
|
||||
- [Next.js App Router + Turbopack](docs/en/guides/next-app-turbopack.md)
|
||||
- [Next.js App Router + Webpack](docs/en/guides/next-app-webpack.md)
|
||||
- [Next.js Pages Router + Turbopack](docs/en/guides/next-pages-turbopack.md)
|
||||
|
||||
37
README_RU.md
37
README_RU.md
@@ -6,7 +6,7 @@
|
||||
|
||||
`@gromlab/svg-sprites` — генератор SVG-спрайтов для современных веб-приложений. Он собирает выбранные SVG-иконки в один или несколько внешних кешируемых спрайтов и подготавливает их для использования в интерфейсе.
|
||||
|
||||
Для vanilla-приложений с Vite/Webpack пакет создаёт нативный типизированный Web Component, а для React и Next.js — React-компонент. SVG во всех случаях остаётся отдельным кешируемым asset.
|
||||
Каждый exact mode создаёт нативный типизированный компонент для своего framework и bundler: Web Component, React, Vue, Svelte, Angular, Astro, Solid, Preact, Qwik, Lit или Alpine.js. SVG во всех случаях остаётся отдельным кешируемым asset.
|
||||
|
||||
## SVG-спрайт так же прост, как обычная SVG-иконка
|
||||
|
||||
@@ -205,26 +205,21 @@ JavaScript отвечает за интерфейс и поведение, а г
|
||||
|
||||
## SpriteViewer: все спрайты на одной debug-странице
|
||||
|
||||
`SpriteViewer` рендерит все standalone, React и Next.js спрайты проекта в одном месте. Один Web Component отвечает за визуал, а React использует тонкий bridge к нему.
|
||||
`SpriteViewer` рендерит спрайты всех поддерживаемых exact modes в одном месте. Один Web Component отвечает за визуал, а для React также доступен тонкий bridge к нему.
|
||||
|
||||
Для каждой иконки видны созданные CSS-переменные и их fallback-цвета. Значения можно менять прямо в Viewer и сразу наблюдать результат.
|
||||
|
||||
Здесь же доступны готовые примеры подключения через:
|
||||
|
||||
- React;
|
||||
- `<svg><use>`;
|
||||
- `<img>`;
|
||||
- CSS.
|
||||
Здесь же доступны готовые примеры для framework из manifest, `<svg><use>`, `<img>` и CSS.
|
||||
|
||||
|
||||
|
||||
Viewer подключается только к внутренней debug-странице и не становится частью generated-компонентов иконок.
|
||||
|
||||
Bare standalone подключает Viewer через browser script и HTML element; bundler modes используют npm entry, а React и Next.js импортируют `SpriteViewer` из `@gromlab/svg-sprites/react`.
|
||||
Bare standalone подключает Viewer через browser script и HTML element. Bundler и framework modes используют npm entry Web Component; React и Next.js также могут импортировать bridge из `@gromlab/svg-sprites/react`.
|
||||
|
||||
## Standalone, React и Next.js
|
||||
## 29 exact modes
|
||||
|
||||
Пакет генерирует низкоуровневые standalone-спрайты для static HTML, Vite и Webpack 5, а также типизированные React-компоненты для React и Next.js.
|
||||
Пакет предоставляет изолированные контракты для standalone, React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Astro, Solid, SolidStart, Preact, Qwik, Lit и Alpine.js в поддерживаемых вариантах Vite, Webpack, Turbopack и application builder.
|
||||
|
||||
## Чистый Git
|
||||
|
||||
@@ -249,6 +244,26 @@ README знакомит с возможностями проекта и пока
|
||||
- [Standalone + Webpack 5](docs/ru/guides/standalone-webpack.md)
|
||||
- [React + Vite](docs/ru/guides/react-vite.md)
|
||||
- [React + Webpack 5](docs/ru/guides/react-webpack.md)
|
||||
- [Vue + Vite](docs/ru/guides/vue-vite.md)
|
||||
- [Vue + Webpack](docs/ru/guides/vue-webpack.md)
|
||||
- [Nuxt + Vite](docs/ru/guides/nuxt-vite.md)
|
||||
- [Nuxt + Webpack](docs/ru/guides/nuxt-webpack.md)
|
||||
- [Svelte + Vite](docs/ru/guides/svelte-vite.md)
|
||||
- [Svelte + Webpack](docs/ru/guides/svelte-webpack.md)
|
||||
- [SvelteKit + Vite](docs/ru/guides/sveltekit-vite.md)
|
||||
- [Angular application builder](docs/ru/guides/angular-application.md)
|
||||
- [Angular + Webpack](docs/ru/guides/angular-webpack.md)
|
||||
- [Astro + Vite](docs/ru/guides/astro-vite.md)
|
||||
- [Solid + Vite](docs/ru/guides/solid-vite.md)
|
||||
- [Solid + Webpack](docs/ru/guides/solid-webpack.md)
|
||||
- [SolidStart + Vite](docs/ru/guides/solid-start-vite.md)
|
||||
- [Preact + Vite](docs/ru/guides/preact-vite.md)
|
||||
- [Preact + Webpack](docs/ru/guides/preact-webpack.md)
|
||||
- [Qwik + Vite](docs/ru/guides/qwik-vite.md)
|
||||
- [Lit + Vite](docs/ru/guides/lit-vite.md)
|
||||
- [Lit + Webpack](docs/ru/guides/lit-webpack.md)
|
||||
- [Alpine.js + Vite](docs/ru/guides/alpine-vite.md)
|
||||
- [Alpine.js + Webpack](docs/ru/guides/alpine-webpack.md)
|
||||
- [Next.js App Router + Turbopack](docs/ru/guides/next-app-turbopack.md)
|
||||
- [Next.js App Router + Webpack](docs/ru/guides/next-app-webpack.md)
|
||||
- [Next.js Pages Router + Turbopack](docs/ru/guides/next-pages-turbopack.md)
|
||||
|
||||
@@ -14,6 +14,26 @@ The common format for JSON, JavaScript, and TypeScript config files is described
|
||||
| Vanilla + Webpack 5 | `standalone@webpack` | [Standalone + Webpack](guides/standalone-webpack.md) |
|
||||
| React + Vite | `react@vite` | [React + Vite](guides/react-vite.md) |
|
||||
| React + Webpack 5 | `react@webpack` | [React + Webpack](guides/react-webpack.md) |
|
||||
| Vue + Vite | `vue@vite` | [Vue + Vite](guides/vue-vite.md) |
|
||||
| Vue + Webpack | `vue@webpack` | [Vue + Webpack](guides/vue-webpack.md) |
|
||||
| Nuxt + Vite | `nuxt@vite` | [Nuxt + Vite](guides/nuxt-vite.md) |
|
||||
| Nuxt + Webpack | `nuxt@webpack` | [Nuxt + Webpack](guides/nuxt-webpack.md) |
|
||||
| Svelte + Vite | `svelte@vite` | [Svelte + Vite](guides/svelte-vite.md) |
|
||||
| Svelte + Webpack | `svelte@webpack` | [Svelte + Webpack](guides/svelte-webpack.md) |
|
||||
| SvelteKit + Vite | `sveltekit@vite` | [SvelteKit + Vite](guides/sveltekit-vite.md) |
|
||||
| Angular application builder | `angular@application` | [Angular application builder](guides/angular-application.md) |
|
||||
| Angular + Webpack | `angular@webpack` | [Angular + Webpack](guides/angular-webpack.md) |
|
||||
| Astro + Vite | `astro@vite` | [Astro + Vite](guides/astro-vite.md) |
|
||||
| Solid + Vite | `solid@vite` | [Solid + Vite](guides/solid-vite.md) |
|
||||
| Solid + Webpack | `solid@webpack` | [Solid + Webpack](guides/solid-webpack.md) |
|
||||
| SolidStart + Vite | `solid-start@vite` | [SolidStart + Vite](guides/solid-start-vite.md) |
|
||||
| Preact + Vite | `preact@vite` | [Preact + Vite](guides/preact-vite.md) |
|
||||
| Preact + Webpack | `preact@webpack` | [Preact + Webpack](guides/preact-webpack.md) |
|
||||
| Qwik + Vite | `qwik@vite` | [Qwik + Vite](guides/qwik-vite.md) |
|
||||
| Lit + Vite | `lit@vite` | [Lit + Vite](guides/lit-vite.md) |
|
||||
| Lit + Webpack | `lit@webpack` | [Lit + Webpack](guides/lit-webpack.md) |
|
||||
| Alpine.js + Vite | `alpine@vite` | [Alpine.js + Vite](guides/alpine-vite.md) |
|
||||
| Alpine.js + Webpack | `alpine@webpack` | [Alpine.js + Webpack](guides/alpine-webpack.md) |
|
||||
| Next.js App Router + Turbopack | `next@app/turbopack` | [App Router + Turbopack](guides/next-app-turbopack.md) |
|
||||
| Next.js App Router + Webpack | `next@app/webpack` | [App Router + Webpack](guides/next-app-webpack.md) |
|
||||
| Next.js Pages Router + Turbopack | `next@pages/turbopack` | [Pages Router + Turbopack](guides/next-pages-turbopack.md) |
|
||||
|
||||
@@ -5,6 +5,26 @@
|
||||
- `standalone@webpack`: [standalone with Webpack](standalone-webpack.md)
|
||||
- `react@vite`: [React with Vite](react-vite.md)
|
||||
- `react@webpack`: [React with Webpack](react-webpack.md)
|
||||
- `vue@vite`: [Vue with Vite](vue-vite.md)
|
||||
- `vue@webpack`: [Vue with Webpack](vue-webpack.md)
|
||||
- `nuxt@vite`: [Nuxt with Vite](nuxt-vite.md)
|
||||
- `nuxt@webpack`: [Nuxt with Webpack](nuxt-webpack.md)
|
||||
- `svelte@vite`: [Svelte with Vite](svelte-vite.md)
|
||||
- `svelte@webpack`: [Svelte with Webpack](svelte-webpack.md)
|
||||
- `sveltekit@vite`: [SvelteKit with Vite](sveltekit-vite.md)
|
||||
- `angular@application`: [Angular application builder](angular-application.md)
|
||||
- `angular@webpack`: [Angular with Webpack](angular-webpack.md)
|
||||
- `astro@vite`: [Astro with Vite](astro-vite.md)
|
||||
- `solid@vite`: [Solid with Vite](solid-vite.md)
|
||||
- `solid@webpack`: [Solid with Webpack](solid-webpack.md)
|
||||
- `solid-start@vite`: [SolidStart with Vite](solid-start-vite.md)
|
||||
- `preact@vite`: [Preact with Vite](preact-vite.md)
|
||||
- `preact@webpack`: [Preact with Webpack](preact-webpack.md)
|
||||
- `qwik@vite`: [Qwik with Vite](qwik-vite.md)
|
||||
- `lit@vite`: [Lit with Vite](lit-vite.md)
|
||||
- `lit@webpack`: [Lit with Webpack](lit-webpack.md)
|
||||
- `alpine@vite`: [Alpine.js with Vite](alpine-vite.md)
|
||||
- `alpine@webpack`: [Alpine.js with Webpack](alpine-webpack.md)
|
||||
- `next@app/turbopack`: [App Router with Turbopack](next-app-turbopack.md)
|
||||
- `next@app/webpack`: [App Router with Webpack](next-app-webpack.md)
|
||||
- `next@pages/turbopack`: [Pages Router with Turbopack](next-pages-turbopack.md)
|
||||
|
||||
91
docs/en/guides/alpine-vite.md
Normal file
91
docs/en/guides/alpine-vite.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# SVG Sprite for Alpine.js with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in an Alpine.js application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "alpine@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The generator does not need to be added to the application dependencies: run it through `npx`.
|
||||
|
||||
Add generation before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Alpine plugin `appAlpinePlugin`, the `x-app-icon` directive, and the `$appIconHref` magic.
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Register the generated plugin before starting Alpine:
|
||||
|
||||
```js
|
||||
import Alpine from 'alpinejs'
|
||||
import { appAlpinePlugin } from '../assets/app-icons/index.js'
|
||||
|
||||
Alpine.plugin(appAlpinePlugin)
|
||||
Alpine.start()
|
||||
```
|
||||
|
||||
Use the reactive directive on an SVG element:
|
||||
|
||||
```html
|
||||
<svg
|
||||
x-data="{ iconName: 'icon-name' }"
|
||||
x-app-icon="iconName"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></svg>
|
||||
```
|
||||
|
||||
The directive expression resolves to a source SVG file name without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Vite loads the generated CSS and emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page and is only needed during development. Install it separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development page:
|
||||
|
||||
```html
|
||||
<gromlab-sprite-viewer viewer-title="Project icons"></gromlab-sprite-viewer>
|
||||
<script type="module" src="/src/svg-sprite-debug.js"></script>
|
||||
```
|
||||
|
||||
Create `src/svg-sprite-debug.js`:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
|
||||
```
|
||||
|
||||
Run `npm run dev` and open the development page. Viewer is independent from the Alpine plugin.
|
||||
103
docs/en/guides/alpine-webpack.md
Normal file
103
docs/en/guides/alpine-webpack.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# SVG Sprite for Alpine.js with Webpack 5
|
||||
|
||||
A quick guide to creating an SVG sprite in an Alpine.js application built with Webpack 5.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "alpine@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The generator does not need to be added to the application dependencies: run it through `npx`.
|
||||
|
||||
Add generation before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Alpine plugin `appAlpinePlugin`, the `x-app-icon` directive, and the `$appIconHref` magic.
|
||||
|
||||
Generated Alpine CSS is imported with the `?inline` query. Add an Asset Module rule to `webpack.config.js`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
resourceQuery: /inline/,
|
||||
type: 'asset/source',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Register the generated plugin before starting Alpine:
|
||||
|
||||
```js
|
||||
import Alpine from 'alpinejs'
|
||||
import { appAlpinePlugin } from '../assets/app-icons/index.js'
|
||||
|
||||
Alpine.plugin(appAlpinePlugin)
|
||||
Alpine.start()
|
||||
```
|
||||
|
||||
Use the reactive directive on an SVG element:
|
||||
|
||||
```html
|
||||
<svg
|
||||
x-data="{ iconName: 'icon-name' }"
|
||||
x-app-icon="iconName"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></svg>
|
||||
```
|
||||
|
||||
The directive expression resolves to a source SVG file name without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Webpack 5 emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page and is only needed during development. Install it separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.viewerTitle = 'Project icons'
|
||||
viewer.sources = [spriteManifest]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
|
||||
Include this entry only in development. Viewer is independent from the Alpine plugin.
|
||||
94
docs/en/guides/angular-application.md
Normal file
94
docs/en/guides/angular-application.md
Normal file
@@ -0,0 +1,94 @@
|
||||
# SVG Sprite for Angular with the Application Builder
|
||||
|
||||
A quick guide to creating an SVG sprite in an Angular application built with `@angular/build:application`.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "angular@application",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Run generation through `npx` before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"prestart": "npm run sprites",
|
||||
"start": "ng serve",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "ng build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The application builder emits imported SVG files when its file loader is enabled. Add this option to the build target in `angular.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"loader": { ".svg": "file" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index'
|
||||
```
|
||||
|
||||
Import the generated standalone component. The value `name: "app"` creates `AppIcon` and the selector `app-icon`:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core'
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [AppIcon],
|
||||
template: `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="width: 24px; height: 24px; color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {}
|
||||
```
|
||||
|
||||
The `icon` input is typed from source file names. Monochrome icons inherit `color`; use `--icon-color-N` for individual colors.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer is optional and only needed during development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Import `@gromlab/svg-sprites/viewer/element`, add `CUSTOM_ELEMENTS_SCHEMA`, and place `<gromlab-sprite-viewer [sources]="viewerSources" />` in the template. Load the generated manifest while omitting framework-only usage metadata:
|
||||
|
||||
```ts
|
||||
readonly viewerSources = [async () => {
|
||||
const { default: manifest } = await import(
|
||||
'../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
)
|
||||
const { usage: _usage, ...viewerManifest } = manifest
|
||||
return viewerManifest
|
||||
}]
|
||||
```
|
||||
|
||||
The Viewer uses the same production sprite URL as `AppIcon`.
|
||||
93
docs/en/guides/angular-webpack.md
Normal file
93
docs/en/guides/angular-webpack.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# SVG Sprite for Angular with Webpack
|
||||
|
||||
A quick guide to creating an SVG sprite in an Angular application built by the Webpack-based Angular CLI browser builder.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "angular@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
This mode is for a workspace whose build target uses the official Webpack builder:
|
||||
|
||||
```json
|
||||
{
|
||||
"builder": "@angular-devkit/build-angular:browser"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Generate the sprite through `npx` before each start and build:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"prestart": "npm run sprites",
|
||||
"start": "ng serve",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "ng build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Webpack resolves the generated `new URL(..., import.meta.url)` expression and emits `sprite.svg` as a production asset.
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index'
|
||||
```
|
||||
|
||||
Import the generated standalone component. The value `name: "app"` creates `AppIcon` and the selector `app-icon`:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core'
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [AppIcon],
|
||||
template: `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="width: 24px; height: 24px; color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {}
|
||||
```
|
||||
|
||||
The `icon` input is typed from source file names. Monochrome icons inherit `color`; use `--icon-color-N` for individual colors.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer is optional and only needed during development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Import `@gromlab/svg-sprites/viewer/element`, add `CUSTOM_ELEMENTS_SCHEMA`, and place `<gromlab-sprite-viewer [sources]="viewerSources" />` in the template:
|
||||
|
||||
```ts
|
||||
readonly viewerSources = [async () => {
|
||||
const { default: manifest } = await import(
|
||||
'../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
)
|
||||
const { usage: _usage, ...viewerManifest } = manifest
|
||||
return viewerManifest
|
||||
}]
|
||||
```
|
||||
|
||||
The Viewer and `AppIcon` share the Webpack-emitted sprite URL.
|
||||
92
docs/en/guides/astro-vite.md
Normal file
92
docs/en/guides/astro-vite.md
Normal file
@@ -0,0 +1,92 @@
|
||||
# SVG Sprite for Astro with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in an Astro application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "astro@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Generate the sprite through `npx` before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "astro dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "astro check && astro build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Create `assets/app-icons/index.d.ts` for the same typed API:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
The value `name: "app"` creates the native Astro component `AppIcon`. Use it in a page:
|
||||
|
||||
```astro
|
||||
---
|
||||
import { AppIcon } from '../../assets/app-icons/index.js'
|
||||
---
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
The `icon` prop is typed from source file names. Vite emits `sprite.svg` from the component's static asset import.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer is optional and only needed during development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add the Viewer to the page and connect the generated manifest in a client script:
|
||||
|
||||
```astro
|
||||
<gromlab-sprite-viewer id="sprite-viewer"></gromlab-sprite-viewer>
|
||||
|
||||
<script>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
const viewer = document.querySelector<SpriteViewerElement>('#sprite-viewer')!
|
||||
viewer.sources = [async () => {
|
||||
const { default: manifest } = await import(
|
||||
'../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
)
|
||||
const { usage: _usage, ...viewerManifest } = manifest
|
||||
return viewerManifest
|
||||
}]
|
||||
</script>
|
||||
```
|
||||
|
||||
The manifest retains Astro usage metadata while Viewer renders the same production sprite.
|
||||
86
docs/en/guides/lit-vite.md
Normal file
86
docs/en/guides/lit-vite.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# SVG Sprite for Lit with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a Lit application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "lit@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The generator does not need to be added to the application dependencies: run it through `npx`.
|
||||
|
||||
Add generation before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Lit class `AppIcon`, the `<app-icon>` tag, and the `defineAppIcon` registration function.
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Register the component before rendering it:
|
||||
|
||||
```js
|
||||
import { defineAppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
defineAppIcon()
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></app-icon>
|
||||
`
|
||||
```
|
||||
|
||||
The `icon` property accepts source SVG file names without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Vite loads the component CSS and emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page and is only needed during development. Install it separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development page:
|
||||
|
||||
```html
|
||||
<gromlab-sprite-viewer viewer-title="Project icons"></gromlab-sprite-viewer>
|
||||
<script type="module" src="/src/svg-sprite-debug.js"></script>
|
||||
```
|
||||
|
||||
Create `src/svg-sprite-debug.js`:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
|
||||
```
|
||||
|
||||
Run `npm run dev` and open the development page. Viewer is not required by `AppIcon`.
|
||||
98
docs/en/guides/lit-webpack.md
Normal file
98
docs/en/guides/lit-webpack.md
Normal file
@@ -0,0 +1,98 @@
|
||||
# SVG Sprite for Lit with Webpack 5
|
||||
|
||||
A quick guide to creating an SVG sprite in a Lit application built with Webpack 5.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "lit@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The generator does not need to be added to the application dependencies: run it through `npx`.
|
||||
|
||||
Add generation before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Lit class `AppIcon`, the `<app-icon>` tag, and the `defineAppIcon` registration function.
|
||||
|
||||
Generated Lit CSS is imported with the `?inline` query. Add an Asset Module rule to `webpack.config.js`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
resourceQuery: /inline/,
|
||||
type: 'asset/source',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Register the component before rendering it:
|
||||
|
||||
```js
|
||||
import { defineAppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
defineAppIcon()
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></app-icon>
|
||||
`
|
||||
```
|
||||
|
||||
The `icon` property accepts source SVG file names without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Webpack 5 emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page and is only needed during development. Install it separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.viewerTitle = 'Project icons'
|
||||
viewer.sources = [spriteManifest]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
|
||||
Include this entry only in development. Viewer is not required by `AppIcon`.
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using App Route
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using App Route
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using Pages Rou
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using Pages Rou
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
100
docs/en/guides/nuxt-vite.md
Normal file
100
docs/en/guides/nuxt-vite.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# SVG Sprite for Nuxt with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a Nuxt application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "nuxt@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "nuxt dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "nuxt build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Vue component `AppIcon`. Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in a Nuxt page or layout:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
`AppIcon` is SSR-safe and does not need a client-only wrapper. Vite emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Create `app/components/SvgSpriteViewer.client.vue` so the browser-only Viewer is not evaluated during SSR:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<gromlab-sprite-viewer :sources="sources" viewer-title="Project icons" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Mark `gromlab-sprite-viewer` as a custom element in `nuxt.config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Render `<SvgSpriteViewer />` on your development page. Viewer is isolated from the generated `AppIcon` runtime.
|
||||
113
docs/en/guides/nuxt-webpack.md
Normal file
113
docs/en/guides/nuxt-webpack.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# SVG Sprite for Nuxt with Webpack
|
||||
|
||||
A quick guide to creating an SVG sprite in a Nuxt application built with Webpack.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "nuxt@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Use the Nuxt Webpack builder in `nuxt.config.ts`:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @nuxt/webpack-builder
|
||||
```
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
builder: '@nuxt/webpack-builder',
|
||||
})
|
||||
```
|
||||
|
||||
Add generation commands to `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "nuxt dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "nuxt build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Vue component `AppIcon`. Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in a Nuxt page or layout:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
`AppIcon` is SSR-safe and does not need a client-only wrapper. Webpack emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Create `app/components/SvgSpriteViewer.client.vue` so the browser-only Viewer is not evaluated during SSR:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<gromlab-sprite-viewer :sources="sources" viewer-title="Project icons" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Extend the existing `nuxt.config.ts` settings so Vue treats the Viewer as a custom element:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
builder: '@nuxt/webpack-builder',
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Render `<SvgSpriteViewer />` on your development page. Viewer is isolated from the generated `AppIcon` runtime.
|
||||
75
docs/en/guides/preact-vite.md
Normal file
75
docs/en/guides/preact-vite.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# SVG Sprite for Preact with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a Preact application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "preact@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Run it through `npx` before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.js` and `assets/app-icons/index.d.ts` with the same export:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the generated plain-JavaScript Preact component:
|
||||
|
||||
```jsx
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Done"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Vite automatically emits the imported `sprite.svg` as a production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Install Viewer only for development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Mount it from a debug entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
75
docs/en/guides/preact-webpack.md
Normal file
75
docs/en/guides/preact-webpack.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# SVG Sprite for Preact with Webpack
|
||||
|
||||
A quick guide to creating an SVG sprite in a Preact application built with Webpack 5.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "preact@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Run it through `npx` before Webpack starts or builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.js` and `assets/app-icons/index.d.ts` with the same export:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the generated Preact component:
|
||||
|
||||
```jsx
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Done"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Webpack Asset Modules emit `sprite.svg` from the generated `new URL(...)` expression.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Install Viewer only for development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Mount it from a development-only entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
82
docs/en/guides/qwik-vite.md
Normal file
82
docs/en/guides/qwik-vite.md
Normal file
@@ -0,0 +1,82 @@
|
||||
# SVG Sprite for Qwik with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in an SSR Qwik application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "qwik@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Regenerate through `npx` before Vite starts or builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite --mode ssr",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
The generated component is a Qwik `component$` and is safe during SSR:
|
||||
|
||||
```tsx
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
export default component$(() => (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Done"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
))
|
||||
```
|
||||
|
||||
The component uses a static Vite asset import and does not access browser globals during SSR.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer is browser-only, optional development tooling:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Load it from a visible task:
|
||||
|
||||
```tsx
|
||||
import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
export const IconViewer = component$(() => {
|
||||
const host = useSignal<HTMLElement>()
|
||||
useVisibleTask$(async () => {
|
||||
await import('@gromlab/svg-sprites/viewer/element')
|
||||
const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
host.value?.append(viewer)
|
||||
})
|
||||
return <div ref={host} />
|
||||
})
|
||||
```
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a React application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -50,7 +50,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a React application built with Webpac
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -50,7 +50,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
83
docs/en/guides/solid-start-vite.md
Normal file
83
docs/en/guides/solid-start-vite.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# SVG Sprite for SolidStart with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in an SSR SolidStart application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "solid-start@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Regenerate through `npx` before Vinxi starts or builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vinxi dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vinxi build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
The generated component is safe to render on the server:
|
||||
|
||||
```tsx
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Done"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
The component uses a static Vite asset import and does not access browser globals during SSR.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer is browser-only, optional development tooling:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Load it from `onMount` so it is excluded from server rendering:
|
||||
|
||||
```tsx
|
||||
import { onMount } from 'solid-js'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
export function IconViewer() {
|
||||
let host!: HTMLDivElement
|
||||
onMount(async () => {
|
||||
await import('@gromlab/svg-sprites/viewer/element')
|
||||
const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
host.append(viewer)
|
||||
})
|
||||
return <div ref={host} />
|
||||
}
|
||||
```
|
||||
83
docs/en/guides/solid-vite.md
Normal file
83
docs/en/guides/solid-vite.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# SVG Sprite for Solid with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a Solid application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "solid@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Run it through `npx` and regenerate before development and production builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
The name `app` creates the Solid component `AppIcon`:
|
||||
|
||||
```tsx
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Done"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Vite emits `sprite.svg` as a production asset. Monochrome icons inherit `color`; multicolor icons use `--icon-color-N`.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer is optional and only needed during development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Mount it from a debug component after the browser is ready:
|
||||
|
||||
```tsx
|
||||
import { onMount } from 'solid-js'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
export function IconViewer() {
|
||||
let host!: HTMLDivElement
|
||||
onMount(async () => {
|
||||
await import('@gromlab/svg-sprites/viewer/element')
|
||||
const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
host.append(viewer)
|
||||
})
|
||||
return <div ref={host} />
|
||||
}
|
||||
```
|
||||
75
docs/en/guides/solid-webpack.md
Normal file
75
docs/en/guides/solid-webpack.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# SVG Sprite for Solid with Webpack
|
||||
|
||||
A quick guide to creating an SVG sprite in a Solid application built with Webpack 5.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "solid@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency. Run it through `npx` before Webpack starts or builds:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
Create `assets/app-icons/index.js` and `assets/app-icons/index.d.ts` with the same export:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the generated Solid component:
|
||||
|
||||
```jsx
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Done"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Webpack Asset Modules emit `sprite.svg` from the generated `new URL(...)`. Keep `.jsx` processing enabled for the generated Solid component.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Install Viewer only for development:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add it to a development-only entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Vite application without a framewor
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -54,10 +54,10 @@ defineAppIconElement()
|
||||
Use the icon in HTML:
|
||||
|
||||
```html
|
||||
<app-icon icon="check" role="img" aria-label="Done"></app-icon>
|
||||
<app-icon icon="icon-name" role="img" aria-label="Done"></app-icon>
|
||||
```
|
||||
|
||||
The file `check.svg` is available as `icon="check"`. Set its size and colors with CSS:
|
||||
The `icon` value is the source SVG filename without the extension. Set its size and colors with CSS:
|
||||
|
||||
```css
|
||||
app-icon {
|
||||
|
||||
@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Webpack 5 application without a fra
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Create `assets/app-icons/svg-sprite.config.json`:
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
|
||||
}
|
||||
```
|
||||
|
||||
The `input` path is relative to the config folder.
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
@@ -54,10 +54,10 @@ defineAppIconElement()
|
||||
Use the icon in HTML:
|
||||
|
||||
```html
|
||||
<app-icon icon="check" role="img" aria-label="Done"></app-icon>
|
||||
<app-icon icon="icon-name" role="img" aria-label="Done"></app-icon>
|
||||
```
|
||||
|
||||
The file `check.svg` is available as `icon="check"`. Set its size and colors with CSS:
|
||||
The `icon` value is the source SVG filename without the extension. Set its size and colors with CSS:
|
||||
|
||||
```css
|
||||
app-icon {
|
||||
|
||||
@@ -6,32 +6,9 @@ Combine SVG icons into one file and use them on an HTML page.
|
||||
|
||||
You do not need to install the package in your project.
|
||||
|
||||
This guide uses the following project structure:
|
||||
|
||||
```text
|
||||
/
|
||||
├── index.html
|
||||
└── assets/
|
||||
├── app-icons/
|
||||
└── svg-icons/
|
||||
├── check.svg
|
||||
└── warning.svg
|
||||
```
|
||||
|
||||
### 1. Create the sprite config
|
||||
|
||||
Choose a folder for the sprite. This example uses `assets/app-icons`. Create `svg-sprite.config.json` inside it:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "standalone",
|
||||
"name": "icons"
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Set the icon source
|
||||
|
||||
`input` can point to a folder, an individual SVG file, or a glob pattern. To use multiple sources, provide an array with any combination of these values:
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -41,7 +18,7 @@ Choose a folder for the sprite. This example uses `assets/app-icons`. Create `sv
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Generate the sprite
|
||||
### 2. Generate the sprite
|
||||
|
||||
Pass the config path to the command:
|
||||
|
||||
@@ -62,7 +39,7 @@ assets/app-icons/.svg-sprite/
|
||||
|
||||
The `.svg-sprite` directory is created automatically and fully replaced on every generation. Do not edit its contents manually.
|
||||
|
||||
### 4. Use an icon
|
||||
### 3. Use an icon
|
||||
|
||||
In `index.html`, point to the generated `sprite.svg`. After `#`, add the icon file name without the `.svg` extension:
|
||||
|
||||
@@ -72,12 +49,10 @@ In `index.html`, point to the generated `sprite.svg`. After `#`, add the icon fi
|
||||
height="24"
|
||||
aria-label="Done"
|
||||
>
|
||||
<use href="./assets/app-icons/.svg-sprite/sprite.svg#check"></use>
|
||||
<use href="./assets/app-icons/.svg-sprite/sprite.svg#icon-name"></use>
|
||||
</svg>
|
||||
```
|
||||
|
||||
The icon from `check.svg` is available as `#check`.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
`sprite.svg` is a technical file, not an icon gallery. Opening it does not provide a convenient view of the whole set. Gradients, masks, filters, and references to internal `id` values may also render with artifacts.
|
||||
|
||||
95
docs/en/guides/svelte-vite.md
Normal file
95
docs/en/guides/svelte-vite.md
Normal file
@@ -0,0 +1,95 @@
|
||||
# SVG Sprite for Svelte with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a Svelte application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "svelte@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Svelte component `AppIcon`.
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in your application:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
The `icon` prop accepts source SVG file names without the extension. A monochrome icon inherits `color`, while colors in a multicolor icon are overridden with `--icon-color-N`.
|
||||
|
||||
Vite automatically includes the component styles and emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development-only Svelte page or component:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
|
||||
function connectViewer(node) {
|
||||
node.sources = sources
|
||||
}
|
||||
</script>
|
||||
|
||||
<gromlab-sprite-viewer
|
||||
use:connectViewer
|
||||
viewer-title="Project icons"
|
||||
></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Run `npm run dev` and open the page containing Viewer. Do not import this development component from the production entry.
|
||||
105
docs/en/guides/svelte-webpack.md
Normal file
105
docs/en/guides/svelte-webpack.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# SVG Sprite for Svelte with Webpack 5
|
||||
|
||||
A quick guide to creating an SVG sprite in a Svelte application built with Webpack 5.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "svelte@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Svelte component `AppIcon`.
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in your application:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
The generated component is a native `.svelte` file. The normal `svelte-loader` rule must include `.svelte` files under `assets`:
|
||||
|
||||
```js
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
options: { emitCss: false },
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Webpack 5 processes the component's asset URL and emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development-only Svelte component:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
|
||||
function connectViewer(node) {
|
||||
node.sources = sources
|
||||
}
|
||||
</script>
|
||||
|
||||
<gromlab-sprite-viewer
|
||||
use:connectViewer
|
||||
viewer-title="Project icons"
|
||||
></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Run `npm run dev` and open the page containing Viewer. Do not import this development component from the production entry.
|
||||
91
docs/en/guides/sveltekit-vite.md
Normal file
91
docs/en/guides/sveltekit-vite.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# SVG Sprite for SvelteKit with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a SvelteKit application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "sveltekit@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the SSR-safe Svelte component `AppIcon`.
|
||||
|
||||
Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in `src/routes/+page.svelte`:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AppIcon } from '../../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
The `icon` prop accepts source SVG file names without the extension. The component has no browser-only initialization, so the page can be rendered on the server. Vite emits `sprite.svg` as a separate production asset.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Create a development route such as `src/routes/svg-sprite/+page.svelte`. Load the custom element from an action so it is only registered in the browser:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
const sources = [
|
||||
() => import('../../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
|
||||
function connectViewer(node) {
|
||||
void import('@gromlab/svg-sprites/viewer/element').then(() => {
|
||||
node.sources = sources
|
||||
node.viewerTitle = 'Project icons'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<gromlab-sprite-viewer use:connectViewer></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Run `npm run dev` and open `/svg-sprite`. The action does not run during SSR.
|
||||
105
docs/en/guides/vue-vite.md
Normal file
105
docs/en/guides/vue-vite.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# SVG Sprite for Vue with Vite
|
||||
|
||||
A quick guide to creating an SVG sprite in a Vue application built with Vite.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "vue@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vue-tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Vue component `AppIcon`.
|
||||
|
||||
Create the entry point `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in your application:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
The `icon` prop accepts source SVG file names without the extension. A monochrome icon inherits `color`, while colors in a multicolor icon are overridden with `--icon-color-N`.
|
||||
|
||||
Vite automatically includes the component styles and adds `sprite.svg` to the production build.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Create `svg-sprite.html` in the project root:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Project icons</title>
|
||||
</head>
|
||||
<body>
|
||||
<gromlab-sprite-viewer viewer-title="Project icons"></gromlab-sprite-viewer>
|
||||
<script type="module" src="/src/svg-sprite-debug.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Create `src/svg-sprite-debug.ts`:
|
||||
|
||||
```ts
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
|
||||
viewer.sources = [spriteManifest]
|
||||
```
|
||||
|
||||
Run `npm run dev` and open `/svg-sprite.html`.
|
||||
|
||||
Viewer is not required by `AppIcon` and is not loaded by the main application code.
|
||||
126
docs/en/guides/vue-webpack.md
Normal file
126
docs/en/guides/vue-webpack.md
Normal file
@@ -0,0 +1,126 @@
|
||||
# SVG Sprite for Vue with Webpack 5
|
||||
|
||||
A quick guide to creating an SVG sprite in a Vue application built with Webpack 5.
|
||||
|
||||
## Generate the sprite
|
||||
|
||||
Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "vue@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
The package does not need to be a project dependency: generation runs through `npx`.
|
||||
|
||||
Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Use the sprite
|
||||
|
||||
The value `name: "app"` creates the Vue component `AppIcon`. Create `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Use the component in your application:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Done"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
The `icon` prop accepts source SVG file names without the extension. A monochrome icon inherits `color`, while colors in a multicolor icon are overridden with `--icon-color-N`.
|
||||
|
||||
The component uses CSS Modules. If the project does not process them yet, install `style-loader` and `css-loader`, then add a rule with a default export:
|
||||
|
||||
```bash
|
||||
npm install --save-dev style-loader css-loader
|
||||
```
|
||||
|
||||
```js
|
||||
{
|
||||
test: /\.module\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { modules: { namedExport: false } },
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Webpack 5 automatically adds `sprite.svg` to the production build.
|
||||
|
||||
## Debug and preview
|
||||
|
||||
Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Add Viewer to a development-only Vue component:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<gromlab-sprite-viewer
|
||||
:sources="sources"
|
||||
viewer-title="Project icons"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
Configure Vue Loader to treat `gromlab-sprite-viewer` as a custom element:
|
||||
|
||||
```js
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Render the Viewer component on your development page. Viewer is not required by `AppIcon`.
|
||||
@@ -15,6 +15,26 @@ Reference for the configuration, generated API, and behavior of `@gromlab/svg-sp
|
||||
- [Next.js App Router + Webpack](../guides/next-app-webpack.md)
|
||||
- [Next.js Pages Router + Turbopack](../guides/next-pages-turbopack.md)
|
||||
- [Next.js Pages Router + Webpack](../guides/next-pages-webpack.md)
|
||||
- [Vue + Vite](../guides/vue-vite.md)
|
||||
- [Vue + Webpack](../guides/vue-webpack.md)
|
||||
- [Nuxt + Vite](../guides/nuxt-vite.md)
|
||||
- [Nuxt + Webpack](../guides/nuxt-webpack.md)
|
||||
- [Svelte + Vite](../guides/svelte-vite.md)
|
||||
- [Svelte + Webpack](../guides/svelte-webpack.md)
|
||||
- [SvelteKit + Vite](../guides/sveltekit-vite.md)
|
||||
- [Angular application builder](../guides/angular-application.md)
|
||||
- [Angular + Webpack](../guides/angular-webpack.md)
|
||||
- [Astro + Vite](../guides/astro-vite.md)
|
||||
- [Solid + Vite](../guides/solid-vite.md)
|
||||
- [Solid + Webpack](../guides/solid-webpack.md)
|
||||
- [SolidStart + Vite](../guides/solid-start-vite.md)
|
||||
- [Preact + Vite](../guides/preact-vite.md)
|
||||
- [Preact + Webpack](../guides/preact-webpack.md)
|
||||
- [Qwik + Vite](../guides/qwik-vite.md)
|
||||
- [Lit + Vite](../guides/lit-vite.md)
|
||||
- [Lit + Webpack](../guides/lit-webpack.md)
|
||||
- [Alpine.js + Vite](../guides/alpine-vite.md)
|
||||
- [Alpine.js + Webpack](../guides/alpine-webpack.md)
|
||||
|
||||
## Requirements
|
||||
|
||||
@@ -51,6 +71,26 @@ svg-sprites [options] <config-file-or-directory>
|
||||
| Standalone + Webpack 5 | `standalone@webpack` |
|
||||
| React + Vite | `react@vite` |
|
||||
| React + Webpack 5 | `react@webpack` |
|
||||
| Vue + Vite | `vue@vite` |
|
||||
| Vue + Webpack | `vue@webpack` |
|
||||
| Nuxt + Vite | `nuxt@vite` |
|
||||
| Nuxt + Webpack | `nuxt@webpack` |
|
||||
| Svelte + Vite | `svelte@vite` |
|
||||
| Svelte + Webpack | `svelte@webpack` |
|
||||
| SvelteKit + Vite | `sveltekit@vite` |
|
||||
| Angular application builder | `angular@application` |
|
||||
| Angular + Webpack | `angular@webpack` |
|
||||
| Astro + Vite | `astro@vite` |
|
||||
| Solid + Vite | `solid@vite` |
|
||||
| Solid + Webpack | `solid@webpack` |
|
||||
| SolidStart + Vite | `solid-start@vite` |
|
||||
| Preact + Vite | `preact@vite` |
|
||||
| Preact + Webpack | `preact@webpack` |
|
||||
| Qwik + Vite | `qwik@vite` |
|
||||
| Lit + Vite | `lit@vite` |
|
||||
| Lit + Webpack | `lit@webpack` |
|
||||
| Alpine.js + Vite | `alpine@vite` |
|
||||
| Alpine.js + Webpack | `alpine@webpack` |
|
||||
| Next.js App Router + Turbopack | `next@app/turbopack` |
|
||||
| Next.js App Router + Webpack 5 | `next@app/webpack` |
|
||||
| Next.js Pages Router + Turbopack | `next@pages/turbopack` |
|
||||
@@ -310,7 +350,7 @@ The component does not add accessibility semantics automatically. Pass appropria
|
||||
|
||||
## Multiple sprites
|
||||
|
||||
Each directory with a configuration creates an independent mode-specific contract. React and Next.js modes generate a React component and types, `standalone@vite` and `standalone@webpack` generate a Web Component and types, and bare `standalone` generates an SVG and JSON manifest:
|
||||
Each directory with a configuration creates an independent mode-specific contract. Framework modes generate their native component and declarations, standalone bundler modes generate a Web Component and declarations, and bare `standalone` generates an SVG and JSON manifest:
|
||||
|
||||
```text
|
||||
app-icons → AppIcon → shared icons
|
||||
@@ -332,7 +372,7 @@ All current modes generate the `stack` format.
|
||||
|
||||
### Generated component
|
||||
|
||||
For React and Next.js, use the generated React component. It knows the internal IDs, constructs the URL, and provides a TypeScript API:
|
||||
Use the generated native component documented by the selected exact-mode guide. It knows the internal IDs, constructs the URL, and provides a TypeScript API. React and Next.js use it like this:
|
||||
|
||||
```tsx
|
||||
<AppIcon icon="search" width={24} height={24} />
|
||||
@@ -570,7 +610,7 @@ export const IconsDebugPage = () => (
|
||||
)
|
||||
```
|
||||
|
||||
The Viewer displays groups, search, `viewBox`, CSS custom properties, and fallback colors. React/Next manifests get React, SVG, IMG, and CSS tabs; standalone manifests get SVG, IMG, and CSS. You can change color values in the interface and immediately inspect the result.
|
||||
The Viewer displays groups, search, `viewBox`, CSS custom properties, and fallback colors. Framework manifests get their framework-specific tab plus SVG, IMG, and CSS; standalone manifests get SVG, IMG, and CSS. You can change color values in the interface and immediately inspect the result.
|
||||
|
||||
### Viewer theme
|
||||
|
||||
|
||||
@@ -14,6 +14,26 @@
|
||||
| Vanilla + Webpack 5 | `standalone@webpack` | [Standalone + Webpack](guides/standalone-webpack.md) |
|
||||
| React + Vite | `react@vite` | [React + Vite](guides/react-vite.md) |
|
||||
| React + Webpack 5 | `react@webpack` | [React + Webpack](guides/react-webpack.md) |
|
||||
| Vue + Vite | `vue@vite` | [Vue + Vite](guides/vue-vite.md) |
|
||||
| Vue + Webpack | `vue@webpack` | [Vue + Webpack](guides/vue-webpack.md) |
|
||||
| Nuxt + Vite | `nuxt@vite` | [Nuxt + Vite](guides/nuxt-vite.md) |
|
||||
| Nuxt + Webpack | `nuxt@webpack` | [Nuxt + Webpack](guides/nuxt-webpack.md) |
|
||||
| Svelte + Vite | `svelte@vite` | [Svelte + Vite](guides/svelte-vite.md) |
|
||||
| Svelte + Webpack | `svelte@webpack` | [Svelte + Webpack](guides/svelte-webpack.md) |
|
||||
| SvelteKit + Vite | `sveltekit@vite` | [SvelteKit + Vite](guides/sveltekit-vite.md) |
|
||||
| Angular application builder | `angular@application` | [Angular application builder](guides/angular-application.md) |
|
||||
| Angular + Webpack | `angular@webpack` | [Angular + Webpack](guides/angular-webpack.md) |
|
||||
| Astro + Vite | `astro@vite` | [Astro + Vite](guides/astro-vite.md) |
|
||||
| Solid + Vite | `solid@vite` | [Solid + Vite](guides/solid-vite.md) |
|
||||
| Solid + Webpack | `solid@webpack` | [Solid + Webpack](guides/solid-webpack.md) |
|
||||
| SolidStart + Vite | `solid-start@vite` | [SolidStart + Vite](guides/solid-start-vite.md) |
|
||||
| Preact + Vite | `preact@vite` | [Preact + Vite](guides/preact-vite.md) |
|
||||
| Preact + Webpack | `preact@webpack` | [Preact + Webpack](guides/preact-webpack.md) |
|
||||
| Qwik + Vite | `qwik@vite` | [Qwik + Vite](guides/qwik-vite.md) |
|
||||
| Lit + Vite | `lit@vite` | [Lit + Vite](guides/lit-vite.md) |
|
||||
| Lit + Webpack | `lit@webpack` | [Lit + Webpack](guides/lit-webpack.md) |
|
||||
| Alpine.js + Vite | `alpine@vite` | [Alpine.js + Vite](guides/alpine-vite.md) |
|
||||
| Alpine.js + Webpack | `alpine@webpack` | [Alpine.js + Webpack](guides/alpine-webpack.md) |
|
||||
| Next.js App Router + Turbopack | `next@app/turbopack` | [App Router + Turbopack](guides/next-app-turbopack.md) |
|
||||
| Next.js App Router + Webpack | `next@app/webpack` | [App Router + Webpack](guides/next-app-webpack.md) |
|
||||
| Next.js Pages Router + Turbopack | `next@pages/turbopack` | [Pages Router + Turbopack](guides/next-pages-turbopack.md) |
|
||||
|
||||
@@ -5,6 +5,26 @@
|
||||
- `standalone@webpack`: [standalone с Webpack](standalone-webpack.md)
|
||||
- `react@vite`: [React с Vite](react-vite.md)
|
||||
- `react@webpack`: [React с Webpack](react-webpack.md)
|
||||
- `vue@vite`: [Vue с Vite](vue-vite.md)
|
||||
- `vue@webpack`: [Vue с Webpack](vue-webpack.md)
|
||||
- `nuxt@vite`: [Nuxt с Vite](nuxt-vite.md)
|
||||
- `nuxt@webpack`: [Nuxt с Webpack](nuxt-webpack.md)
|
||||
- `svelte@vite`: [Svelte с Vite](svelte-vite.md)
|
||||
- `svelte@webpack`: [Svelte с Webpack](svelte-webpack.md)
|
||||
- `sveltekit@vite`: [SvelteKit с Vite](sveltekit-vite.md)
|
||||
- `angular@application`: [Angular application builder](angular-application.md)
|
||||
- `angular@webpack`: [Angular с Webpack](angular-webpack.md)
|
||||
- `astro@vite`: [Astro с Vite](astro-vite.md)
|
||||
- `solid@vite`: [Solid с Vite](solid-vite.md)
|
||||
- `solid@webpack`: [Solid с Webpack](solid-webpack.md)
|
||||
- `solid-start@vite`: [SolidStart с Vite](solid-start-vite.md)
|
||||
- `preact@vite`: [Preact с Vite](preact-vite.md)
|
||||
- `preact@webpack`: [Preact с Webpack](preact-webpack.md)
|
||||
- `qwik@vite`: [Qwik с Vite](qwik-vite.md)
|
||||
- `lit@vite`: [Lit с Vite](lit-vite.md)
|
||||
- `lit@webpack`: [Lit с Webpack](lit-webpack.md)
|
||||
- `alpine@vite`: [Alpine.js с Vite](alpine-vite.md)
|
||||
- `alpine@webpack`: [Alpine.js с Webpack](alpine-webpack.md)
|
||||
- `next@app/turbopack`: [App Router с Turbopack](next-app-turbopack.md)
|
||||
- `next@app/webpack`: [App Router с Webpack](next-app-webpack.md)
|
||||
- `next@pages/turbopack`: [Pages Router с Turbopack](next-pages-turbopack.md)
|
||||
|
||||
91
docs/ru/guides/alpine-vite.md
Normal file
91
docs/ru/guides/alpine-vite.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# SVG-спрайт для Alpine.js на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Alpine.js-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "alpine@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Генератор не нужно добавлять в зависимости приложения: запускайте его через `npx`.
|
||||
|
||||
Добавьте генерацию перед запуском разработки и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Alpine plugin `appAlpinePlugin`, директиву `x-app-icon` и magic `$appIconHref`.
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Зарегистрируйте generated plugin до запуска Alpine:
|
||||
|
||||
```js
|
||||
import Alpine from 'alpinejs'
|
||||
import { appAlpinePlugin } from '../assets/app-icons/index.js'
|
||||
|
||||
Alpine.plugin(appAlpinePlugin)
|
||||
Alpine.start()
|
||||
```
|
||||
|
||||
Используйте реактивную директиву на SVG-элементе:
|
||||
|
||||
```html
|
||||
<svg
|
||||
x-data="{ iconName: 'icon-name' }"
|
||||
x-app-icon="iconName"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></svg>
|
||||
```
|
||||
|
||||
Выражение директивы возвращает имя исходного SVG без расширения. Монохромная иконка наследует `color`, а слои многоцветной иконки переопределяются через `--icon-color-N`. Vite подключает generated CSS и выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице и нужен только при разработке. Установите его отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer на development-страницу:
|
||||
|
||||
```html
|
||||
<gromlab-sprite-viewer viewer-title="Иконки проекта"></gromlab-sprite-viewer>
|
||||
<script type="module" src="/src/svg-sprite-debug.js"></script>
|
||||
```
|
||||
|
||||
Создайте `src/svg-sprite-debug.js`:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
|
||||
```
|
||||
|
||||
Запустите `npm run dev` и откройте development-страницу. Viewer не зависит от Alpine plugin.
|
||||
103
docs/ru/guides/alpine-webpack.md
Normal file
103
docs/ru/guides/alpine-webpack.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# SVG-спрайт для Alpine.js на Webpack 5
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Alpine.js-приложении на Webpack 5.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "alpine@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Генератор не нужно добавлять в зависимости приложения: запускайте его через `npx`.
|
||||
|
||||
Добавьте генерацию перед запуском разработки и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Alpine plugin `appAlpinePlugin`, директиву `x-app-icon` и magic `$appIconHref`.
|
||||
|
||||
Generated CSS Alpine импортируется с query `?inline`. Добавьте правило Asset Modules в `webpack.config.js`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
resourceQuery: /inline/,
|
||||
type: 'asset/source',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Зарегистрируйте generated plugin до запуска Alpine:
|
||||
|
||||
```js
|
||||
import Alpine from 'alpinejs'
|
||||
import { appAlpinePlugin } from '../assets/app-icons/index.js'
|
||||
|
||||
Alpine.plugin(appAlpinePlugin)
|
||||
Alpine.start()
|
||||
```
|
||||
|
||||
Используйте реактивную директиву на SVG-элементе:
|
||||
|
||||
```html
|
||||
<svg
|
||||
x-data="{ iconName: 'icon-name' }"
|
||||
x-app-icon="iconName"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></svg>
|
||||
```
|
||||
|
||||
Выражение директивы возвращает имя исходного SVG без расширения. Монохромная иконка наследует `color`, а слои многоцветной иконки переопределяются через `--icon-color-N`. Webpack 5 выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице и нужен только при разработке. Установите его отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer в development entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.viewerTitle = 'Иконки проекта'
|
||||
viewer.sources = [spriteManifest]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
|
||||
Подключайте этот entry только при разработке. Viewer не зависит от Alpine plugin.
|
||||
94
docs/ru/guides/angular-application.md
Normal file
94
docs/ru/guides/angular-application.md
Normal file
@@ -0,0 +1,94 @@
|
||||
# SVG-спрайт для Angular с Application Builder
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Angular-приложении на `@angular/build:application`.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "angular@application",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Запускайте генерацию через `npx` перед разработкой и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"prestart": "npm run sprites",
|
||||
"start": "ng serve",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "ng build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Application Builder выпускает импортированный SVG отдельным файлом при включённом file loader. Добавьте опцию в build target файла `angular.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"loader": { ".svg": "file" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index'
|
||||
```
|
||||
|
||||
Импортируйте сгенерированный standalone-компонент. Значение `name: "app"` создаёт `AppIcon` с селектором `app-icon`:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core'
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [AppIcon],
|
||||
template: `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="width: 24px; height: 24px; color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {}
|
||||
```
|
||||
|
||||
Input `icon` типизирован именами исходных файлов. Монохромные иконки наследуют `color`, отдельные цвета задаются через `--icon-color-N`.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer необязателен и нужен только при разработке:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Импортируйте `@gromlab/svg-sprites/viewer/element`, добавьте `CUSTOM_ELEMENTS_SCHEMA` и поместите `<gromlab-sprite-viewer [sources]="viewerSources" />` в шаблон. Загрузите generated manifest без framework-specific metadata:
|
||||
|
||||
```ts
|
||||
readonly viewerSources = [async () => {
|
||||
const { default: manifest } = await import(
|
||||
'../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
)
|
||||
const { usage: _usage, ...viewerManifest } = manifest
|
||||
return viewerManifest
|
||||
}]
|
||||
```
|
||||
|
||||
Viewer использует тот же production URL спрайта, что и `AppIcon`.
|
||||
93
docs/ru/guides/angular-webpack.md
Normal file
93
docs/ru/guides/angular-webpack.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# SVG-спрайт для Angular на Webpack
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Angular-приложении со штатным Webpack browser builder из Angular CLI.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "angular@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Mode предназначен для workspace, где build target использует официальный Webpack builder:
|
||||
|
||||
```json
|
||||
{
|
||||
"builder": "@angular-devkit/build-angular:browser"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Генерируйте спрайт через `npx` перед каждым запуском и сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"prestart": "npm run sprites",
|
||||
"start": "ng serve",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "ng build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Webpack разрешает generated-выражение `new URL(..., import.meta.url)` и выпускает `sprite.svg` как production asset.
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index'
|
||||
```
|
||||
|
||||
Импортируйте сгенерированный standalone-компонент. Значение `name: "app"` создаёт `AppIcon` с селектором `app-icon`:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core'
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [AppIcon],
|
||||
template: `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="width: 24px; height: 24px; color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {}
|
||||
```
|
||||
|
||||
Input `icon` типизирован именами исходных файлов. Монохромные иконки наследуют `color`, отдельные цвета задаются через `--icon-color-N`.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer необязателен и нужен только при разработке:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Импортируйте `@gromlab/svg-sprites/viewer/element`, добавьте `CUSTOM_ELEMENTS_SCHEMA` и поместите `<gromlab-sprite-viewer [sources]="viewerSources" />` в шаблон:
|
||||
|
||||
```ts
|
||||
readonly viewerSources = [async () => {
|
||||
const { default: manifest } = await import(
|
||||
'../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
)
|
||||
const { usage: _usage, ...viewerManifest } = manifest
|
||||
return viewerManifest
|
||||
}]
|
||||
```
|
||||
|
||||
Viewer и `AppIcon` используют один выпущенный Webpack URL спрайта.
|
||||
92
docs/ru/guides/astro-vite.md
Normal file
92
docs/ru/guides/astro-vite.md
Normal file
@@ -0,0 +1,92 @@
|
||||
# SVG-спрайт для Astro на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Astro-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "astro@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Генерируйте спрайт через `npx` перед разработкой и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "astro dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "astro check && astro build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Создайте `assets/app-icons/index.d.ts` для того же типизированного API:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Значение `name: "app"` создаёт нативный Astro-компонент `AppIcon`. Используйте его на странице:
|
||||
|
||||
```astro
|
||||
---
|
||||
import { AppIcon } from '../../assets/app-icons/index.js'
|
||||
---
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
Prop `icon` типизирован именами исходных файлов. Vite выпускает `sprite.svg` из статического asset import компонента.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer необязателен и нужен только при разработке:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer на страницу и подключите generated manifest в клиентском скрипте:
|
||||
|
||||
```astro
|
||||
<gromlab-sprite-viewer id="sprite-viewer"></gromlab-sprite-viewer>
|
||||
|
||||
<script>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
const viewer = document.querySelector<SpriteViewerElement>('#sprite-viewer')!
|
||||
viewer.sources = [async () => {
|
||||
const { default: manifest } = await import(
|
||||
'../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
)
|
||||
const { usage: _usage, ...viewerManifest } = manifest
|
||||
return viewerManifest
|
||||
}]
|
||||
</script>
|
||||
```
|
||||
|
||||
Manifest сохраняет Astro usage metadata, а Viewer отображает тот же production-спрайт.
|
||||
86
docs/ru/guides/lit-vite.md
Normal file
86
docs/ru/guides/lit-vite.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# SVG-спрайт для Lit на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Lit-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "lit@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Генератор не нужно добавлять в зависимости приложения: запускайте его через `npx`.
|
||||
|
||||
Добавьте генерацию перед запуском разработки и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Lit-класс `AppIcon`, тег `<app-icon>` и функцию регистрации `defineAppIcon`.
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Зарегистрируйте компонент перед его отображением:
|
||||
|
||||
```js
|
||||
import { defineAppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
defineAppIcon()
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></app-icon>
|
||||
`
|
||||
```
|
||||
|
||||
Свойство `icon` принимает имя исходного SVG без расширения. Монохромная иконка наследует `color`, а слои многоцветной иконки переопределяются через `--icon-color-N`. Vite подключает CSS компонента и выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице и нужен только при разработке. Установите его отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer на development-страницу:
|
||||
|
||||
```html
|
||||
<gromlab-sprite-viewer viewer-title="Иконки проекта"></gromlab-sprite-viewer>
|
||||
<script type="module" src="/src/svg-sprite-debug.js"></script>
|
||||
```
|
||||
|
||||
Создайте `src/svg-sprite-debug.js`:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
|
||||
```
|
||||
|
||||
Запустите `npm run dev` и откройте development-страницу. Viewer не требуется для работы `AppIcon`.
|
||||
98
docs/ru/guides/lit-webpack.md
Normal file
98
docs/ru/guides/lit-webpack.md
Normal file
@@ -0,0 +1,98 @@
|
||||
# SVG-спрайт для Lit на Webpack 5
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Lit-приложении на Webpack 5.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "lit@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Генератор не нужно добавлять в зависимости приложения: запускайте его через `npx`.
|
||||
|
||||
Добавьте генерацию перед запуском разработки и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Lit-класс `AppIcon`, тег `<app-icon>` и функцию регистрации `defineAppIcon`.
|
||||
|
||||
Generated CSS Lit импортируется с query `?inline`. Добавьте правило Asset Modules в `webpack.config.js`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
resourceQuery: /inline/,
|
||||
type: 'asset/source',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Зарегистрируйте компонент перед его отображением:
|
||||
|
||||
```js
|
||||
import { defineAppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
defineAppIcon()
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<app-icon
|
||||
icon="icon-name"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
|
||||
></app-icon>
|
||||
`
|
||||
```
|
||||
|
||||
Свойство `icon` принимает имя исходного SVG без расширения. Монохромная иконка наследует `color`, а слои многоцветной иконки переопределяются через `--icon-color-N`. Webpack 5 выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице и нужен только при разработке. Установите его отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer в development entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.viewerTitle = 'Иконки проекта'
|
||||
viewer.sources = [spriteManifest]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
|
||||
Подключайте этот entry только при разработке. Viewer не требуется для работы `AppIcon`.
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export default function Page() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
100
docs/ru/guides/nuxt-vite.md
Normal file
100
docs/ru/guides/nuxt-vite.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# SVG-спрайт для Nuxt на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Nuxt-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "nuxt@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "nuxt dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "nuxt build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Vue-компонент `AppIcon`. Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент на странице или в layout Nuxt:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
`AppIcon` безопасен для SSR и не требует client-only обёртки. Vite выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Создайте `app/components/SvgSpriteViewer.client.vue`, чтобы browser-only Viewer не выполнялся во время SSR:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<gromlab-sprite-viewer :sources="sources" viewer-title="Иконки проекта" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Отметьте `gromlab-sprite-viewer` как custom element в `nuxt.config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Покажите `<SvgSpriteViewer />` на странице разработки. Viewer изолирован от generated runtime компонента `AppIcon`.
|
||||
113
docs/ru/guides/nuxt-webpack.md
Normal file
113
docs/ru/guides/nuxt-webpack.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# SVG-спрайт для Nuxt на Webpack
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Nuxt-приложении на Webpack.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "nuxt@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Подключите Webpack builder Nuxt в `nuxt.config.ts`:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @nuxt/webpack-builder
|
||||
```
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
builder: '@nuxt/webpack-builder',
|
||||
})
|
||||
```
|
||||
|
||||
Добавьте команды генерации в `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "nuxt dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "nuxt build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Vue-компонент `AppIcon`. Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент на странице или в layout Nuxt:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
`AppIcon` безопасен для SSR и не требует client-only обёртки. Webpack выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Создайте `app/components/SvgSpriteViewer.client.vue`, чтобы browser-only Viewer не выполнялся во время SSR:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<gromlab-sprite-viewer :sources="sources" viewer-title="Иконки проекта" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Дополните существующие настройки `nuxt.config.ts`, чтобы Vue считал Viewer custom element:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
builder: '@nuxt/webpack-builder',
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Покажите `<SvgSpriteViewer />` на странице разработки. Viewer изолирован от generated runtime компонента `AppIcon`.
|
||||
75
docs/ru/guides/preact-vite.md
Normal file
75
docs/ru/guides/preact-vite.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# SVG-спрайт для Preact на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Preact-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "preact@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Запускайте его через `npx` перед разработкой и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.js` и `assets/app-icons/index.d.ts` с одинаковым экспортом:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте сгенерированный Preact-компонент на plain JavaScript:
|
||||
|
||||
```jsx
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Готово"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Vite автоматически выпускает импортированный `sprite.svg` как production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Установите Viewer только для разработки:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Подключите его в отладочной entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
75
docs/ru/guides/preact-webpack.md
Normal file
75
docs/ru/guides/preact-webpack.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# SVG-спрайт для Preact на Webpack
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Preact-приложении на Webpack 5.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "preact@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Запускайте его через `npx` перед запуском и сборкой Webpack:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.js` и `assets/app-icons/index.d.ts` с одинаковым экспортом:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте сгенерированный Preact-компонент:
|
||||
|
||||
```jsx
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Готово"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Webpack Asset Modules выпускают `sprite.svg` из сгенерированного выражения `new URL(...)`.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Установите Viewer только для разработки:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Подключите его в отдельной development entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
82
docs/ru/guides/qwik-vite.md
Normal file
82
docs/ru/guides/qwik-vite.md
Normal file
@@ -0,0 +1,82 @@
|
||||
# SVG-спрайт для Qwik на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в SSR-приложении Qwik на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "qwik@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Перегенерируйте спрайт через `npx` перед запуском и сборкой Vite:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite --mode ssr",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Сгенерированный компонент является Qwik `component$` и безопасен во время SSR:
|
||||
|
||||
```tsx
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
export default component$(() => (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Готово"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
))
|
||||
```
|
||||
|
||||
Компонент использует статический Vite asset import и не обращается к browser globals во время SSR.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer работает только в браузере и нужен лишь для разработки:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Загрузите его из visible task:
|
||||
|
||||
```tsx
|
||||
import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
export const IconViewer = component$(() => {
|
||||
const host = useSignal<HTMLElement>()
|
||||
useVisibleTask$(async () => {
|
||||
await import('@gromlab/svg-sprites/viewer/element')
|
||||
const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
host.value?.append(viewer)
|
||||
})
|
||||
return <div ref={host} />
|
||||
})
|
||||
```
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -50,7 +50,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -50,7 +50,7 @@ import { AppIcon } from '../assets/app-icons'
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="check"
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
role="img"
|
||||
|
||||
83
docs/ru/guides/solid-start-vite.md
Normal file
83
docs/ru/guides/solid-start-vite.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# SVG-спрайт для SolidStart на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в SSR-приложении SolidStart на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "solid-start@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Перегенерируйте спрайт через `npx` перед запуском и сборкой Vinxi:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vinxi dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vinxi build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Сгенерированный компонент безопасно рендерится на сервере:
|
||||
|
||||
```tsx
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Готово"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Компонент использует статический Vite asset import и не обращается к browser globals во время SSR.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer работает только в браузере и нужен лишь для разработки:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Загрузите его из `onMount`, чтобы исключить из серверного рендера:
|
||||
|
||||
```tsx
|
||||
import { onMount } from 'solid-js'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
export function IconViewer() {
|
||||
let host!: HTMLDivElement
|
||||
onMount(async () => {
|
||||
await import('@gromlab/svg-sprites/viewer/element')
|
||||
const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
host.append(viewer)
|
||||
})
|
||||
return <div ref={host} />
|
||||
}
|
||||
```
|
||||
83
docs/ru/guides/solid-vite.md
Normal file
83
docs/ru/guides/solid-vite.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# SVG-спрайт для Solid на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Solid-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "solid@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Запускайте его через `npx` перед разработкой и production-сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Имя `app` создаёт Solid-компонент `AppIcon`:
|
||||
|
||||
```tsx
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Готово"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Vite выпускает `sprite.svg` как production asset. Монохромные иконки наследуют `color`, многоцветные используют `--icon-color-N`.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer нужен только во время разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Подключите его в отладочном компоненте после запуска браузерного кода:
|
||||
|
||||
```tsx
|
||||
import { onMount } from 'solid-js'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
|
||||
export function IconViewer() {
|
||||
let host!: HTMLDivElement
|
||||
onMount(async () => {
|
||||
await import('@gromlab/svg-sprites/viewer/element')
|
||||
const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
host.append(viewer)
|
||||
})
|
||||
return <div ref={host} />
|
||||
}
|
||||
```
|
||||
75
docs/ru/guides/solid-webpack.md
Normal file
75
docs/ru/guides/solid-webpack.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# SVG-спрайт для Solid на Webpack
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Solid-приложении на Webpack 5.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "solid@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта. Запускайте его через `npx` перед запуском и сборкой Webpack:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "tsc --noEmit && webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Создайте `assets/app-icons/index.js` и `assets/app-icons/index.d.ts` с одинаковым экспортом:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте сгенерированный Solid-компонент:
|
||||
|
||||
```jsx
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width={24}
|
||||
height={24}
|
||||
aria-label="Готово"
|
||||
style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Webpack Asset Modules выпускают `sprite.svg` из сгенерированного `new URL(...)`. Обработка `.jsx` должна охватывать сгенерированный Solid-компонент.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Установите Viewer только для разработки:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Подключите его в отдельной development entry:
|
||||
|
||||
```js
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const viewer = document.createElement('gromlab-sprite-viewer')
|
||||
viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
|
||||
document.body.append(viewer)
|
||||
```
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -54,10 +54,10 @@ defineAppIconElement()
|
||||
Используйте иконку в HTML:
|
||||
|
||||
```html
|
||||
<app-icon icon="check" role="img" aria-label="Готово"></app-icon>
|
||||
<app-icon icon="icon-name" role="img" aria-label="Готово"></app-icon>
|
||||
```
|
||||
|
||||
Файл `check.svg` доступен как `icon="check"`. Размер и цвета настраиваются через CSS:
|
||||
Значение `icon` — имя исходного SVG без расширения. Размер и цвета настраиваются через CSS:
|
||||
|
||||
```css
|
||||
app-icon {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
Путь в `input` считается от папки с конфигом.
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
@@ -54,10 +54,10 @@ defineAppIconElement()
|
||||
Используйте иконку в HTML:
|
||||
|
||||
```html
|
||||
<app-icon icon="check" role="img" aria-label="Готово"></app-icon>
|
||||
<app-icon icon="icon-name" role="img" aria-label="Готово"></app-icon>
|
||||
```
|
||||
|
||||
Файл `check.svg` доступен как `icon="check"`. Размер и цвета настраиваются через CSS:
|
||||
Значение `icon` — имя исходного SVG без расширения. Размер и цвета настраиваются через CSS:
|
||||
|
||||
```css
|
||||
app-icon {
|
||||
|
||||
@@ -6,32 +6,9 @@
|
||||
|
||||
Устанавливать пакет в проект не нужно.
|
||||
|
||||
В руководстве используется следующая структура проекта:
|
||||
|
||||
```text
|
||||
/
|
||||
├── index.html
|
||||
└── assets/
|
||||
├── app-icons/
|
||||
└── svg-icons/
|
||||
├── check.svg
|
||||
└── warning.svg
|
||||
```
|
||||
|
||||
### 1. Создайте конфиг спрайта
|
||||
|
||||
Выберите папку для спрайта. В этом примере используется `assets/app-icons`. Создайте в ней файл `svg-sprite.config.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "standalone",
|
||||
"name": "icons"
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Укажите источник иконок
|
||||
|
||||
В `input` можно указать папку, отдельный SVG-файл или glob-шаблон. Для нескольких источников используйте массив с любой комбинацией этих значений:
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -41,7 +18,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Сгенерируйте спрайт
|
||||
### 2. Сгенерируйте спрайт
|
||||
|
||||
Передайте команде путь к конфигу:
|
||||
|
||||
@@ -62,7 +39,7 @@ assets/app-icons/.svg-sprite/
|
||||
|
||||
Каталог `.svg-sprite` создаётся автоматически и полностью заменяется при каждой генерации. Не редактируйте его содержимое вручную.
|
||||
|
||||
### 4. Используйте иконку
|
||||
### 3. Используйте иконку
|
||||
|
||||
В `index.html` укажите путь к созданному `sprite.svg`. После `#` добавьте имя нужной иконки без расширения `.svg`:
|
||||
|
||||
@@ -72,12 +49,10 @@ assets/app-icons/.svg-sprite/
|
||||
height="24"
|
||||
aria-label="Готово"
|
||||
>
|
||||
<use href="./assets/app-icons/.svg-sprite/sprite.svg#check"></use>
|
||||
<use href="./assets/app-icons/.svg-sprite/sprite.svg#icon-name"></use>
|
||||
</svg>
|
||||
```
|
||||
|
||||
Иконка из файла `check.svg` будет доступна как `#check`.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
`sprite.svg` — технический файл, а не галерея иконок. При его открытии нельзя удобно просмотреть весь набор. Кроме того, градиенты, маски, фильтры и ссылки на внутренние `id` могут отображаться с артефактами.
|
||||
@@ -105,4 +80,4 @@ Viewer работает напрямую с файлами из `.svg-sprite`.
|
||||
></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Viewer можно вынести в отдельный HTML-файл в корне сайта, предназначенный только для разработки и проверки иконок.
|
||||
Viewer можно вынести в отдельный HTML-файл в корне сайта, предназначенный только для разработки и проверки иконок.
|
||||
|
||||
95
docs/ru/guides/svelte-vite.md
Normal file
95
docs/ru/guides/svelte-vite.md
Normal file
@@ -0,0 +1,95 @@
|
||||
# SVG-спрайт для Svelte на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Svelte-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "svelte@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Svelte-компонент `AppIcon`.
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент в приложении:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
Свойство `icon` принимает имена исходных SVG без расширения. Монохромная иконка наследует `color`, а цвета многоцветной переопределяются через `--icon-color-N`.
|
||||
|
||||
Vite сам подключает стили компонента и выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer на страницу или в компонент, используемый только при разработке:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
|
||||
function connectViewer(node) {
|
||||
node.sources = sources
|
||||
}
|
||||
</script>
|
||||
|
||||
<gromlab-sprite-viewer
|
||||
use:connectViewer
|
||||
viewer-title="Иконки проекта"
|
||||
></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Запустите `npm run dev` и откройте страницу с Viewer. Не импортируйте этот отладочный компонент из production entry.
|
||||
105
docs/ru/guides/svelte-webpack.md
Normal file
105
docs/ru/guides/svelte-webpack.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# SVG-спрайт для Svelte на Webpack 5
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Svelte-приложении на Webpack 5.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "svelte@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Svelte-компонент `AppIcon`.
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент в приложении:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
Generated-компонент является нативным `.svelte`-файлом. Обычное правило `svelte-loader` должно обрабатывать `.svelte`-файлы в `assets`:
|
||||
|
||||
```js
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
options: { emitCss: false },
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Webpack 5 обрабатывает asset URL из компонента и выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer в Svelte-компонент, используемый только при разработке:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
|
||||
function connectViewer(node) {
|
||||
node.sources = sources
|
||||
}
|
||||
</script>
|
||||
|
||||
<gromlab-sprite-viewer
|
||||
use:connectViewer
|
||||
viewer-title="Иконки проекта"
|
||||
></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Запустите `npm run dev` и откройте страницу с Viewer. Не импортируйте этот отладочный компонент из production entry.
|
||||
91
docs/ru/guides/sveltekit-vite.md
Normal file
91
docs/ru/guides/sveltekit-vite.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# SVG-спрайт для SvelteKit на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в SvelteKit-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "sveltekit@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite dev",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт SSR-safe Svelte-компонент `AppIcon`.
|
||||
|
||||
Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент в `src/routes/+page.svelte`:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AppIcon } from '../../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
```
|
||||
|
||||
Свойство `icon` принимает имена исходных SVG без расширения. В компоненте нет browser-only инициализации, поэтому страница может рендериться на сервере. Vite выпускает `sprite.svg` отдельным production asset.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Создайте отладочный route, например `src/routes/svg-sprite/+page.svelte`. Загружайте custom element из action, чтобы регистрация выполнялась только в браузере:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
const sources = [
|
||||
() => import('../../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
|
||||
function connectViewer(node) {
|
||||
void import('@gromlab/svg-sprites/viewer/element').then(() => {
|
||||
node.sources = sources
|
||||
node.viewerTitle = 'Иконки проекта'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<gromlab-sprite-viewer use:connectViewer></gromlab-sprite-viewer>
|
||||
```
|
||||
|
||||
Запустите `npm run dev` и откройте `/svg-sprite`. Action не выполняется во время SSR.
|
||||
105
docs/ru/guides/vue-vite.md
Normal file
105
docs/ru/guides/vue-vite.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# SVG-спрайт для Vue на Vite
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Vue-приложении на Vite.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "vue@vite",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "vite",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "vue-tsc --noEmit && vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Vue-компонент `AppIcon`.
|
||||
|
||||
Создайте точку входа `assets/app-icons/index.ts`:
|
||||
|
||||
```ts
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент в приложении:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AppIcon } from '../assets/app-icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
Свойство `icon` принимает имена исходных SVG без расширения. Монохромная иконка наследует `color`, а цвета многоцветной переопределяются через `--icon-color-N`.
|
||||
|
||||
Vite сам подключает стили компонента и добавляет `sprite.svg` в итоговую сборку.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Создайте `svg-sprite.html` в корне проекта:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Иконки проекта</title>
|
||||
</head>
|
||||
<body>
|
||||
<gromlab-sprite-viewer viewer-title="Иконки проекта"></gromlab-sprite-viewer>
|
||||
<script type="module" src="/src/svg-sprite-debug.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Создайте `src/svg-sprite-debug.ts`:
|
||||
|
||||
```ts
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
|
||||
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
|
||||
|
||||
const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
|
||||
viewer.sources = [spriteManifest]
|
||||
```
|
||||
|
||||
Запустите `npm run dev` и откройте `/svg-sprite.html`.
|
||||
|
||||
Viewer не требуется для работы `AppIcon` и не подключается к основному коду приложения.
|
||||
126
docs/ru/guides/vue-webpack.md
Normal file
126
docs/ru/guides/vue-webpack.md
Normal file
@@ -0,0 +1,126 @@
|
||||
# SVG-спрайт для Vue на Webpack 5
|
||||
|
||||
Инструкция по быстрому созданию SVG-спрайта в Vue-приложении на Webpack 5.
|
||||
|
||||
## Генерация спрайта
|
||||
|
||||
Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
|
||||
|
||||
Пример конфига:
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "vue@webpack",
|
||||
"name": "app",
|
||||
"input": "../svg-icons/**/*.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
|
||||
|
||||
Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
|
||||
"predev": "npm run sprites",
|
||||
"dev": "webpack serve --mode development",
|
||||
"prebuild": "npm run sprites",
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Использование спрайта
|
||||
|
||||
Значение `name: "app"` создаёт Vue-компонент `AppIcon`. Создайте `assets/app-icons/index.js`:
|
||||
|
||||
```js
|
||||
export * from './.svg-sprite/index.js'
|
||||
```
|
||||
|
||||
Используйте компонент в приложении:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { AppIcon } from '../assets/app-icons/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppIcon
|
||||
icon="icon-name"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Готово"
|
||||
style="color: #334155; --icon-color-2: #f59e0b"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
Свойство `icon` принимает имена исходных SVG без расширения. Монохромная иконка наследует `color`, а цвета многоцветной переопределяются через `--icon-color-N`.
|
||||
|
||||
Компонент использует CSS Modules. Если проект ещё не обрабатывает их, установите `style-loader` и `css-loader`, затем добавьте правило с default export:
|
||||
|
||||
```bash
|
||||
npm install --save-dev style-loader css-loader
|
||||
```
|
||||
|
||||
```js
|
||||
{
|
||||
test: /\.module\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { modules: { namedExport: false } },
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Webpack 5 сам добавляет `sprite.svg` в итоговую сборку.
|
||||
|
||||
## Дебаг и превью
|
||||
|
||||
Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @gromlab/svg-sprites
|
||||
```
|
||||
|
||||
Добавьте Viewer в Vue-компонент, подключаемый только при разработке:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
const sources = [
|
||||
() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<gromlab-sprite-viewer
|
||||
:sources="sources"
|
||||
viewer-title="Иконки проекта"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
Настройте Vue Loader так, чтобы `gromlab-sprite-viewer` считался custom element:
|
||||
|
||||
```js
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Покажите компонент Viewer на странице разработки. Viewer не требуется для работы `AppIcon`.
|
||||
@@ -15,6 +15,26 @@
|
||||
- [Next.js App Router + Webpack](../guides/next-app-webpack.md)
|
||||
- [Next.js Pages Router + Turbopack](../guides/next-pages-turbopack.md)
|
||||
- [Next.js Pages Router + Webpack](../guides/next-pages-webpack.md)
|
||||
- [Vue + Vite](../guides/vue-vite.md)
|
||||
- [Vue + Webpack](../guides/vue-webpack.md)
|
||||
- [Nuxt + Vite](../guides/nuxt-vite.md)
|
||||
- [Nuxt + Webpack](../guides/nuxt-webpack.md)
|
||||
- [Svelte + Vite](../guides/svelte-vite.md)
|
||||
- [Svelte + Webpack](../guides/svelte-webpack.md)
|
||||
- [SvelteKit + Vite](../guides/sveltekit-vite.md)
|
||||
- [Angular application builder](../guides/angular-application.md)
|
||||
- [Angular + Webpack](../guides/angular-webpack.md)
|
||||
- [Astro + Vite](../guides/astro-vite.md)
|
||||
- [Solid + Vite](../guides/solid-vite.md)
|
||||
- [Solid + Webpack](../guides/solid-webpack.md)
|
||||
- [SolidStart + Vite](../guides/solid-start-vite.md)
|
||||
- [Preact + Vite](../guides/preact-vite.md)
|
||||
- [Preact + Webpack](../guides/preact-webpack.md)
|
||||
- [Qwik + Vite](../guides/qwik-vite.md)
|
||||
- [Lit + Vite](../guides/lit-vite.md)
|
||||
- [Lit + Webpack](../guides/lit-webpack.md)
|
||||
- [Alpine.js + Vite](../guides/alpine-vite.md)
|
||||
- [Alpine.js + Webpack](../guides/alpine-webpack.md)
|
||||
|
||||
## Требования
|
||||
|
||||
@@ -51,6 +71,26 @@ svg-sprites [options] <config-file-or-directory>
|
||||
| Standalone + Webpack 5 | `standalone@webpack` |
|
||||
| React + Vite | `react@vite` |
|
||||
| React + Webpack 5 | `react@webpack` |
|
||||
| Vue + Vite | `vue@vite` |
|
||||
| Vue + Webpack | `vue@webpack` |
|
||||
| Nuxt + Vite | `nuxt@vite` |
|
||||
| Nuxt + Webpack | `nuxt@webpack` |
|
||||
| Svelte + Vite | `svelte@vite` |
|
||||
| Svelte + Webpack | `svelte@webpack` |
|
||||
| SvelteKit + Vite | `sveltekit@vite` |
|
||||
| Angular application builder | `angular@application` |
|
||||
| Angular + Webpack | `angular@webpack` |
|
||||
| Astro + Vite | `astro@vite` |
|
||||
| Solid + Vite | `solid@vite` |
|
||||
| Solid + Webpack | `solid@webpack` |
|
||||
| SolidStart + Vite | `solid-start@vite` |
|
||||
| Preact + Vite | `preact@vite` |
|
||||
| Preact + Webpack | `preact@webpack` |
|
||||
| Qwik + Vite | `qwik@vite` |
|
||||
| Lit + Vite | `lit@vite` |
|
||||
| Lit + Webpack | `lit@webpack` |
|
||||
| Alpine.js + Vite | `alpine@vite` |
|
||||
| Alpine.js + Webpack | `alpine@webpack` |
|
||||
| Next.js App Router + Turbopack | `next@app/turbopack` |
|
||||
| Next.js App Router + Webpack 5 | `next@app/webpack` |
|
||||
| Next.js Pages Router + Turbopack | `next@pages/turbopack` |
|
||||
@@ -309,7 +349,7 @@ folder open.svg → icon="folder open" → id="icon-<stable-hash>"
|
||||
|
||||
## Множественные спрайты
|
||||
|
||||
Каждый каталог с конфигом создаёт независимый mode-specific контракт. React и Next.js создают React-компонент и типы, `standalone@vite` и `standalone@webpack` — Web Component и типы, а bare `standalone` — SVG и JSON manifest:
|
||||
Каждый каталог с конфигом создаёт независимый mode-specific контракт. Framework modes создают нативный компонент и declarations, standalone bundler modes — Web Component и declarations, а bare `standalone` — SVG и JSON manifest:
|
||||
|
||||
```text
|
||||
app-icons → AppIcon → общие иконки
|
||||
@@ -331,7 +371,7 @@ editor-icons → EditorIcon → иконки редактора
|
||||
|
||||
### Generated-компонент
|
||||
|
||||
Для React и Next.js используйте generated React-компонент. Он знает внутренние ID, формирует URL и предоставляет TypeScript API:
|
||||
Используйте generated native-компонент из guide выбранного exact mode. Он знает внутренние ID, формирует URL и предоставляет TypeScript API. Для React и Next.js это выглядит так:
|
||||
|
||||
```tsx
|
||||
<AppIcon icon="search" width={24} height={24} />
|
||||
@@ -569,7 +609,7 @@ export const IconsDebugPage = () => (
|
||||
)
|
||||
```
|
||||
|
||||
Viewer показывает группы, поиск, `viewBox`, CSS-переменные и fallback-цвета. React/Next manifests получают вкладки React, SVG, IMG и CSS; standalone manifests получают SVG, IMG и CSS. Цветовые значения можно менять в интерфейсе и сразу проверять результат.
|
||||
Viewer показывает группы, поиск, `viewBox`, CSS-переменные и fallback-цвета. Framework manifests получают вкладку своего framework, а также SVG, IMG и CSS; standalone manifests получают SVG, IMG и CSS. Цветовые значения можно менять в интерфейсе и сразу проверять результат.
|
||||
|
||||
### Тема Viewer
|
||||
|
||||
|
||||
@@ -12,13 +12,32 @@ production build и отображения внешнего SVG-спрайта
|
||||
| `standalone-webpack` | `standalone@webpack` | Vanilla TypeScript + Webpack 5 |
|
||||
| `react-vite` | `react@vite` | React + Vite |
|
||||
| `react-webpack` | `react@webpack` | React + Webpack 5 |
|
||||
| `vue-vite` | `vue@vite` | Vue + Vite |
|
||||
| `vue-webpack` | `vue@webpack` | Vue + Webpack 5 |
|
||||
| `nuxt-vite` | `nuxt@vite` | Nuxt + Vite |
|
||||
| `nuxt-webpack` | `nuxt@webpack` | Nuxt + Webpack |
|
||||
| `svelte-vite` | `svelte@vite` | Svelte + Vite |
|
||||
| `svelte-webpack` | `svelte@webpack` | Svelte + Webpack |
|
||||
| `sveltekit` | `sveltekit@vite` | SvelteKit + Vite |
|
||||
| `angular` | `angular@application` | Angular application builder |
|
||||
| `angular-webpack` | `angular@webpack` | Angular + Webpack |
|
||||
| `astro` | `astro@vite` | Astro + Vite |
|
||||
| `solid-vite` | `solid@vite` | Solid + Vite |
|
||||
| `solid-webpack` | `solid@webpack` | Solid + Webpack |
|
||||
| `solid-start-vite` | `solid-start@vite` | SolidStart + Vite |
|
||||
| `preact-vite` | `preact@vite` | Preact + Vite |
|
||||
| `preact-webpack` | `preact@webpack` | Preact + Webpack |
|
||||
| `qwik-vite` | `qwik@vite` | Qwik + Vite |
|
||||
| `lit-vite` | `lit@vite` | Lit + Vite |
|
||||
| `lit-webpack` | `lit@webpack` | Lit + Webpack |
|
||||
| `alpine-vite` | `alpine@vite` | Alpine.js + Vite |
|
||||
| `alpine-webpack` | `alpine@webpack` | Alpine.js + Webpack |
|
||||
| `next-app-turbopack` | `next@app/turbopack` | App Router + Turbopack |
|
||||
| `next-app-webpack` | `next@app/webpack` | App Router + Webpack |
|
||||
| `next-pages-turbopack` | `next@pages/turbopack` | Pages Router + Turbopack |
|
||||
| `next-pages-webpack` | `next@pages/webpack` | Pages Router + Webpack |
|
||||
|
||||
В verify-матрицу входят только поддерживаемые exact modes. Fixtures остальных
|
||||
frameworks сохранены как заготовки и будут подключаться после появления их adapters.
|
||||
В verify-матрицу входят все exact modes из корневого `MODES_CHECKLIST.md`.
|
||||
|
||||
## Первый запуск
|
||||
|
||||
@@ -46,10 +65,12 @@ npm run integration:test
|
||||
Для запуска команды только в одном fixture:
|
||||
|
||||
```bash
|
||||
node integration/scripts/run-workspaces.mjs build react-vite
|
||||
node scripts/run-workspaces.mjs build react-vite
|
||||
npm run dev --workspace @svg-sprites-fixtures/react-vite --prefix integration
|
||||
```
|
||||
|
||||
Первую команду запускайте из каталога `integration`.
|
||||
|
||||
Перед E2E production builds должны существовать. Тест запускает каждый server
|
||||
последовательно, проверяет внешний `href`, HTTP status и Content-Type спрайта,
|
||||
наличие symbol ID, отсутствие browser errors и зелёные пиксели отрисованной иконки.
|
||||
|
||||
17
integration/apps/alpine-vite/index.html
Normal file
17
integration/apps/alpine-vite/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Alpine Vite sprite fixture</title>
|
||||
<style>
|
||||
:root { font-family: system-ui, sans-serif; color: #172033; background: #fff; }
|
||||
body { margin: 0; padding: 40px; }
|
||||
gromlab-sprite-viewer { display: block; margin-top: 32px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main id="app"></main>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
20
integration/apps/alpine-vite/package.json
Normal file
20
integration/apps/alpine-vite/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "@svg-sprites-fixtures/alpine-vite",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build": "npm run sprites && npm run typecheck && vite build",
|
||||
"dev": "npm run sprites && vite"
|
||||
},
|
||||
"dependencies": {
|
||||
"alpinejs": "3.15.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gromlab/svg-sprites": "file:../../..",
|
||||
"typescript": "6.0.2",
|
||||
"vite": "8.1.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import {
|
||||
iconsAlpinePlugin,
|
||||
iconsIconDirective,
|
||||
iconsIconMagic,
|
||||
iconsIconNames,
|
||||
type IconsIconName,
|
||||
} from './sprite/index.js'
|
||||
|
||||
declare const Alpine: { plugin(plugin: typeof iconsAlpinePlugin): void }
|
||||
|
||||
const iconName: IconsIconName = iconsIconNames[0]
|
||||
const directive: 'icons-icon' = iconsIconDirective
|
||||
const magic: 'iconsIconHref' = iconsIconMagic
|
||||
|
||||
Alpine.plugin(iconsAlpinePlugin)
|
||||
void iconName
|
||||
void directive
|
||||
void magic
|
||||
|
||||
// @ts-expect-error Generated icon names form a literal union.
|
||||
const missingIcon: IconsIconName = 'missing'
|
||||
void missingIcon
|
||||
25
integration/apps/alpine-vite/src/main.js
Normal file
25
integration/apps/alpine-vite/src/main.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import Alpine from 'alpinejs'
|
||||
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
|
||||
import { iconsAlpinePlugin } from './sprite/index.js'
|
||||
|
||||
Alpine.plugin(iconsAlpinePlugin)
|
||||
window.Alpine = Alpine
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<main x-data>
|
||||
<h1>Alpine + Vite</h1>
|
||||
<svg
|
||||
data-testid="icon"
|
||||
data-app="alpine-vite"
|
||||
x-icons-icon="'check'"
|
||||
role="img"
|
||||
aria-label="Check icon"
|
||||
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
|
||||
></svg>
|
||||
<gromlab-sprite-viewer viewer-title="Alpine Vite Viewer"></gromlab-sprite-viewer>
|
||||
</main>
|
||||
`
|
||||
|
||||
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
|
||||
Alpine.start()
|
||||
2
integration/apps/alpine-vite/src/sprite/.gitignore
vendored
Normal file
2
integration/apps/alpine-vite/src/sprite/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
# @generated by @gromlab/svg-sprites. Do not edit.
|
||||
/.svg-sprite/
|
||||
1
integration/apps/alpine-vite/src/sprite/index.d.ts
vendored
Normal file
1
integration/apps/alpine-vite/src/sprite/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from './.svg-sprite/index.js'
|
||||
1
integration/apps/alpine-vite/src/sprite/index.js
Normal file
1
integration/apps/alpine-vite/src/sprite/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export * from './.svg-sprite/index.js'
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"mode": "alpine@vite",
|
||||
"name": "icons",
|
||||
"input": "../../../../fixtures/icons/check.svg",
|
||||
"generatedNotice": false
|
||||
}
|
||||
12
integration/apps/alpine-vite/tsconfig.json
Normal file
12
integration/apps/alpine-vite/tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/generated-contract.typecheck.ts"]
|
||||
}
|
||||
16
integration/apps/alpine-webpack/index.html
Normal file
16
integration/apps/alpine-webpack/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Alpine Webpack sprite fixture</title>
|
||||
<style>
|
||||
:root { font-family: system-ui, sans-serif; color: #172033; background: #fff; }
|
||||
body { margin: 0; padding: 40px; }
|
||||
gromlab-sprite-viewer { display: block; margin-top: 32px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main id="app"></main>
|
||||
</body>
|
||||
</html>
|
||||
23
integration/apps/alpine-webpack/package.json
Normal file
23
integration/apps/alpine-webpack/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "@svg-sprites-fixtures/alpine-webpack",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build": "npm run sprites && npm run typecheck && webpack --mode production",
|
||||
"dev": "npm run sprites && webpack serve --mode development"
|
||||
},
|
||||
"dependencies": {
|
||||
"alpinejs": "3.15.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gromlab/svg-sprites": "file:../../..",
|
||||
"html-webpack-plugin": "5.6.7",
|
||||
"typescript": "6.0.2",
|
||||
"webpack": "5.108.4",
|
||||
"webpack-cli": "7.2.1",
|
||||
"webpack-dev-server": "5.2.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import {
|
||||
iconsAlpinePlugin,
|
||||
iconsIconDirective,
|
||||
iconsIconMagic,
|
||||
iconsIconNames,
|
||||
type IconsIconName,
|
||||
} from './sprite/index.js'
|
||||
|
||||
declare const Alpine: { plugin(plugin: typeof iconsAlpinePlugin): void }
|
||||
|
||||
const iconName: IconsIconName = iconsIconNames[0]
|
||||
const directive: 'icons-icon' = iconsIconDirective
|
||||
const magic: 'iconsIconHref' = iconsIconMagic
|
||||
|
||||
Alpine.plugin(iconsAlpinePlugin)
|
||||
void iconName
|
||||
void directive
|
||||
void magic
|
||||
|
||||
// @ts-expect-error Generated icon names form a literal union.
|
||||
const missingIcon: IconsIconName = 'missing'
|
||||
void missingIcon
|
||||
25
integration/apps/alpine-webpack/src/main.js
Normal file
25
integration/apps/alpine-webpack/src/main.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
import Alpine from 'alpinejs'
|
||||
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
|
||||
import { iconsAlpinePlugin } from './sprite/index.js'
|
||||
|
||||
Alpine.plugin(iconsAlpinePlugin)
|
||||
window.Alpine = Alpine
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<main x-data>
|
||||
<h1>Alpine + Webpack</h1>
|
||||
<svg
|
||||
data-testid="icon"
|
||||
data-app="alpine-webpack"
|
||||
x-icons-icon="'check'"
|
||||
role="img"
|
||||
aria-label="Check icon"
|
||||
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
|
||||
></svg>
|
||||
<gromlab-sprite-viewer viewer-title="Alpine Webpack Viewer"></gromlab-sprite-viewer>
|
||||
</main>
|
||||
`
|
||||
|
||||
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
|
||||
Alpine.start()
|
||||
2
integration/apps/alpine-webpack/src/sprite/.gitignore
vendored
Normal file
2
integration/apps/alpine-webpack/src/sprite/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
# @generated by @gromlab/svg-sprites. Do not edit.
|
||||
/.svg-sprite/
|
||||
1
integration/apps/alpine-webpack/src/sprite/index.d.ts
vendored
Normal file
1
integration/apps/alpine-webpack/src/sprite/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from './.svg-sprite/index.js'
|
||||
1
integration/apps/alpine-webpack/src/sprite/index.js
Normal file
1
integration/apps/alpine-webpack/src/sprite/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export * from './.svg-sprite/index.js'
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"mode": "alpine@webpack",
|
||||
"name": "icons",
|
||||
"input": "../../../../fixtures/icons/check.svg",
|
||||
"generatedNotice": false
|
||||
}
|
||||
12
integration/apps/alpine-webpack/tsconfig.json
Normal file
12
integration/apps/alpine-webpack/tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/generated-contract.typecheck.ts"]
|
||||
}
|
||||
26
integration/apps/alpine-webpack/webpack.config.js
Normal file
26
integration/apps/alpine-webpack/webpack.config.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin'
|
||||
|
||||
const root = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
export default {
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.join(root, 'dist'),
|
||||
filename: 'assets/app.[contenthash].js',
|
||||
assetModuleFilename: 'assets/[name].[contenthash][ext]',
|
||||
clean: true,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
resourceQuery: /inline/,
|
||||
type: 'asset/source',
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
|
||||
}
|
||||
33
integration/apps/angular-webpack/package.json
Normal file
33
integration/apps/angular-webpack/package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@svg-sprites-fixtures/angular-webpack",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
|
||||
"typecheck": "ngc -p tsconfig.json --noEmit",
|
||||
"build": "npm run sprites && webpack --mode production",
|
||||
"dev": "npm run sprites && webpack serve --mode development"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "21.2.18",
|
||||
"@angular/compiler": "21.2.18",
|
||||
"@angular/core": "21.2.18",
|
||||
"@angular/platform-browser": "21.2.18",
|
||||
"rxjs": "7.8.2",
|
||||
"tslib": "2.8.1",
|
||||
"zone.js": "0.16.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/compiler-cli": "21.2.18",
|
||||
"@babel/core": "7.28.6",
|
||||
"@gromlab/svg-sprites": "file:../../..",
|
||||
"@ngtools/webpack": "21.2.18",
|
||||
"babel-loader": "10.0.0",
|
||||
"html-webpack-plugin": "5.6.6",
|
||||
"raw-loader": "4.0.2",
|
||||
"typescript": "5.9.3",
|
||||
"webpack": "5.105.4",
|
||||
"webpack-cli": "6.0.1",
|
||||
"webpack-dev-server": "5.2.3"
|
||||
}
|
||||
}
|
||||
11
integration/apps/angular-webpack/src/index.html
Normal file
11
integration/apps/angular-webpack/src/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Angular Webpack sprite fixture</title>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
37
integration/apps/angular-webpack/src/main.ts
Normal file
37
integration/apps/angular-webpack/src/main.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import '@gromlab/svg-sprites/viewer/element'
|
||||
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
|
||||
import { bootstrapApplication } from '@angular/platform-browser'
|
||||
|
||||
import { IconsIcon } from './sprite'
|
||||
import './type-probe'
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [IconsIcon],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
template: `
|
||||
<main>
|
||||
<h1>Angular + Webpack</h1>
|
||||
<icons-icon
|
||||
data-testid="icon"
|
||||
data-app="angular-webpack"
|
||||
icon="check"
|
||||
aria-label="Check icon"
|
||||
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
|
||||
/>
|
||||
<gromlab-sprite-viewer
|
||||
[sources]="viewerSources"
|
||||
viewer-title="Angular Webpack Viewer"
|
||||
/>
|
||||
</main>
|
||||
`,
|
||||
})
|
||||
class AppComponent {
|
||||
readonly viewerSources = [
|
||||
() => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
|
||||
]
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent).catch((error: unknown) => console.error(error))
|
||||
2
integration/apps/angular-webpack/src/sprite/.gitignore
vendored
Normal file
2
integration/apps/angular-webpack/src/sprite/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
# @generated by @gromlab/svg-sprites. Do not edit.
|
||||
/.svg-sprite/
|
||||
1
integration/apps/angular-webpack/src/sprite/index.ts
Normal file
1
integration/apps/angular-webpack/src/sprite/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './.svg-sprite/index'
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
mode: 'angular@webpack',
|
||||
name: 'icons',
|
||||
input: '../../../../fixtures/icons/check.svg',
|
||||
generatedNotice: false,
|
||||
}
|
||||
8
integration/apps/angular-webpack/src/type-probe.ts
Normal file
8
integration/apps/angular-webpack/src/type-probe.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { IconsIconName } from './sprite'
|
||||
|
||||
const validIcon: IconsIconName = 'check'
|
||||
void validIcon
|
||||
|
||||
// @ts-expect-error generated icon names are a closed union
|
||||
const invalidIcon: IconsIconName = 'missing'
|
||||
void invalidIcon
|
||||
17
integration/apps/angular-webpack/tsconfig.json
Normal file
17
integration/apps/angular-webpack/tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"strict": true,
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": ["src/main.ts", "src/type-probe.ts"],
|
||||
"include": ["src/**/*.d.ts"]
|
||||
}
|
||||
42
integration/apps/angular-webpack/webpack.config.js
Normal file
42
integration/apps/angular-webpack/webpack.config.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
import { AngularWebpackPlugin } from '@ngtools/webpack'
|
||||
import linkerPlugin from '@angular/compiler-cli/linker/babel'
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin'
|
||||
|
||||
const rootDir = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
export default {
|
||||
entry: path.join(rootDir, 'src/main.ts'),
|
||||
output: {
|
||||
path: path.join(rootDir, 'dist'),
|
||||
filename: 'app.[contenthash].js',
|
||||
clean: true,
|
||||
assetModuleFilename: 'assets/[name].[contenthash][ext]',
|
||||
},
|
||||
resolve: { extensions: ['.ts', '.js'] },
|
||||
module: {
|
||||
rules: [
|
||||
{ test: /\.ts$/, loader: '@ngtools/webpack' },
|
||||
{
|
||||
test: /\.[cm]?js$/,
|
||||
exclude: /@babel(?:\/|\\)runtime/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
compact: false,
|
||||
plugins: [linkerPlugin],
|
||||
},
|
||||
},
|
||||
},
|
||||
{ test: /\.css$/, use: 'raw-loader' },
|
||||
{ test: /\.svg$/, type: 'asset/resource' },
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new AngularWebpackPlugin({ tsconfig: path.join(rootDir, 'tsconfig.json') }),
|
||||
new HtmlWebpackPlugin({ template: path.join(rootDir, 'src/index.html') }),
|
||||
],
|
||||
devServer: { host: '127.0.0.1', static: path.join(rootDir, 'dist') },
|
||||
}
|
||||
@@ -21,6 +21,9 @@
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"loader": {
|
||||
".svg": "file"
|
||||
},
|
||||
"styles": ["src/styles.css"],
|
||||
"outputPath": "dist/angular"
|
||||
},
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"sprites": "svg-sprites --mode legacy .",
|
||||
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
|
||||
"typecheck": "ngc -p tsconfig.app.json --noEmit",
|
||||
"build": "npm run sprites && ng build --configuration production",
|
||||
"dev": "npm run sprites && ng serve"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user