chore: перевести проект на SLM-структуру и добавить SVG-спрайты
- Добавлены devDependencies: svg-sprite, postcss-preset-mantine, postcss-simple-vars, colorette - Добавлен npm-скрипт `sprite` для генерации SVG-спрайтов - Обновлены настройки и расширения VS Code - Переименованы слои: entities → business, features → infrastructure, shared/ui → ui - Обновлены шаблоны генерации (.templates) под новые слои - Обновлены path-алиасы в tsconfig.json: убран префикс @/, добавлены алиасы по слоям - Импорт в src/app/page.tsx переведён на алиас слоя - Удалён postcss.config.mjs - Добавлен скрипт scripts/create-svg-sprite.js - Добавлены исходные SVG-иконки и сгенерированные спрайты - Добавлен модуль src/shared/sprites/icons.generated.ts - Добавлены глобальные стилевые токены: variables.css, media.css - Применён медиа-токен в src/screens/home/styles/home.module.css - Добавлен AGENTS.md с инструкциями для AI-ассистента
This commit is contained in:
161
public/img/sprites/icons/sprite.stack.html
Normal file
161
public/img/sprites/icons/sprite.stack.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SVG stack preview | svg-sprite</title>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
header {
|
||||
display: block;
|
||||
padding: 3em 3em 2em;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin: 2em 0 0;
|
||||
}
|
||||
|
||||
section {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 2em 3em 0;
|
||||
}
|
||||
|
||||
section ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section li {
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin: 0 2em 2em 0;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ccc;
|
||||
padding: 1em 1em 3em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
margin: 0;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
position: relative;
|
||||
background: #ccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' d='M6 0h6v6H6zM0 6h6v6H0z'/%3E%3C/svg%3E") top left repeat;
|
||||
border: 1px solid #ccc;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 3em 3em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #0f7595;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
Sprite shape dimensions
|
||||
====================================================================================================
|
||||
You will need to set the sprite shape dimensions via CSS when you use them as stack SVGs, otherwise
|
||||
they would become a huge 100% in size. You may use the following dimension classes for doing so.
|
||||
They might well be outsourced to an external stylesheet of course.
|
||||
-->
|
||||
|
||||
<style>
|
||||
.svg-arrow-down-dims { width: 24px; height: 24px; }
|
||||
.svg-arrow-right-dims { width: 20px; height: 20px; }
|
||||
</style>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>SVG stack preview</h1>
|
||||
<p>This preview features an SVG stack. Please have a look at the HTML source for further details and be aware of the following constraints:</p>
|
||||
<ul>
|
||||
<li>Your browser has to <a href="https://caniuse.com/svg-fragment" target="_blank" rel="noopener noreferrer">support SVG fragment identifiers</a> for SVG stacks to work.</li>
|
||||
<li>Support for SVG fragment identifiers hasn't always been that decent. For older browsers you will have to use some prolyfill like <a href="https://github.com/preciousforever/SVG-Stacker/blob/master/fixsvgstack.jquery.js" target="_blank" rel="noopener noreferrer">fixsvgstack.jquery.js</a>.</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section>
|
||||
|
||||
<!--
|
||||
SVG stack
|
||||
====================================================================================================
|
||||
These SVG images make use of fragment identifiers (IDs) to reference certain portions of the
|
||||
external sprite. By default, all shapes inside the sprite are hidden by CSS. The `:target` pseudo
|
||||
selector is used to show the very shape that is referenced by the fragment identifier.
|
||||
-->
|
||||
|
||||
<ul>
|
||||
|
||||
<li title="arrow-down">
|
||||
<div class="icon-box">
|
||||
<img src="sprite.stack.svg#arrow-down" class="svg-arrow-down-dims" alt="arrow-down">
|
||||
</div>
|
||||
<h2>arrow-down, </h2>
|
||||
</li>
|
||||
<li title="arrow-right">
|
||||
<div class="icon-box">
|
||||
<img src="sprite.stack.svg#arrow-right" class="svg-arrow-right-dims" alt="arrow-right">
|
||||
</div>
|
||||
<h2>arrow-right, </h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
<p>Generated at Tue, 21 Apr 2026 18:16:57 GMT by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
1
public/img/sprites/icons/sprite.stack.svg
Normal file
1
public/img/sprites/icons/sprite.stack.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg viewBox="0 0 24 24" fill="none" id="arrow-down" xmlns="http://www.w3.org/2000/svg"><path d="M18.07 14.43 12 20.5l-6.07-6.07M12 3.5v16.83" stroke="var(--icon-color-1, currentColor)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg><svg viewBox="0 0 20 20" fill="none" id="arrow-right" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 10a.75.75 0 0 1-.22.53l-5.833 5.834a.75.75 0 1 1-1.06-1.06l4.553-4.554H1.667a.75.75 0 0 1 0-1.5H15.69l-4.553-4.553a.75.75 0 0 1 1.06-1.06l5.834 5.833c.14.14.22.331.22.53Z" fill="var(--icon-color-1, currentColor)"/></svg></svg>
|
||||
|
After Width: | Height: | Size: 843 B |
Reference in New Issue
Block a user