# Процесс разработки
Для того, чтобы ознакомиться с процессом разработки, разберем следующую задачу:
- Создание нового App проекта, которая будет состоять из одной html страницы.
- Создание общего CSS файла для нашего приложения.
- Создание главной страницы index.html
- Генерация SVG иконок как спрайт (не шрифт).
- Упаковка в релиз и передача заказчику сверстанный веб шаблон.
Опустим процесс установки ungic, и перейдем к созданию проекта.
# Создание проекта
Для начала, перейдем к нашему рабочему каталогу, назовем его mydir:
> cd /d D://mydir
Создаем проект с именем App с помощью команды ungic create App:
D://mydir> ungic create App
Log output to console disabled. You can enable this option using the "log true" command.
√ project name ... App
√ version ... 1.0.0
√ author ... unbywyd
------- System -------
| Project successfully initialized. To run the project, go to the created App directory and use the "ungic run" command!
----------------------
Мы видим, что проект был успешно создан и сгенерирован в D://mydir/App директорию, переходим в проект и запускаем его с помощью команды ungic run:
d:\mydir> cd App
d:\mydir\App> ungic run
Log output to console disabled. You can enable this option using the "log true" command.
------- System -------
| App app running at: http://127.0.0.1:2020
----------------------
ungic:
Проект был запущен, а также в браузере автоматически открылась стартовая страница по адресу http://127.0.0.1:2020. По данному адресу, можно получить доступ ко всему, что находится в App/dist директории нашего проекта.
TIP
В среде разработки, dist директория является public директорией проекта, но не являются конечной директорией для публикации, для этого следует сгенерировать релиз!
# Создание CSS
Начнем с создания css файла, для того, чтобы включить его в наш будущий html документ с помощью CLI меню.
Для данного примера, мы используем только один компонент, который будет генерировать наши конечные CSS стили документа. Для создания компонента, требуется перейти в scss меню с помощью команды scss:
ungic scss: ?
------- System: CLI -------
| Unknown argument: ?
---------------------------
ungic scss: index.js [command]
Commands:
index.js exit Exit from application
index.js back Back to main menu
index.js create <cid> Create new component
index.js release <release_name> Assemble components in a release
[build_name]
index.js components Show list of existing components
index.js unwatch Skip file changes for this plugin
index.js watch Continue to watch file changes for
this plugin
index.js remove <cid> Remove component
ungic scss:
Как видим, нам нужна команда create <cid>, используем её для создания нашего компонента:
ungic scss: create app
------- System: CLI -------
| app component successfully created!
---------------------------
Наш компонент, успешно создан и находится по пути D:\mydir\App\source\scss\components\app.
TIP
В режиме разработки, каждый SASS компонент генерирует собственный конечный .css файл!
На данный момент, мы закончим с данным разделом и перейдем к следующему этапу.
# Создание документа
Для того, чтобы создать новый документ, можно перейти в рабочую директорию HTML плагина source/html и создать обычный HTML документ посредством редактора, а можно воспользоваться командой create через CLI меню HTML плагина. Мы выберем второй вариант:
ungic scss: back # вернемся назад
ungic: html # перейдем в меню html плагина
ungic html: create index # создадим страницу
? Language ISO Code. Will set lang attribute to the html tag ru
? RTL false
? Title My first page
? Description
? Include sass components app # из списка выберем наш sass app компонент
------- System: CLI -------
| Done!
---------------------------
После ввода create <name> команды, будет предложено указать некоторые параметры страницы включая возможность выбрать SASS компоненты, которые будут задействованы при разработке данной страницы.
Перейдем к нашей странице source/html/index.html и посмотрим её содержимое:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<un-pipe css="app"></un-pipe>
<title>My first page</title>
</head>
<body>
</body>
</html>
Как мы видим, это почти обычный HTML документ за исключением тега <un-pipe css="app"></un-pipe>, который связывает наш sass компонент с данным документом и включает сгенерированный .css файл в режиме разработки.
Если мы посмотрим в конечную dist директорию нашего проекта, то мы увидим в ней наш сгенерированный index.html файл, со следующим содержимым:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" data-component="app" href="http://127.0.0.1:2020/css/app.css?v=1604310073685">
<title>My first page</title>
<link rel="stylesheet" href="http://127.0.0.1:2020/ungic/css/devtools.css">
</head>
<body>
<script src="http://127.0.0.1:2020/ungic/js/dist/pipe.min.js" data-connect="http://127.0.0.1:2020" data-src="index.html"></script>
</body>
</html>
Как видим, данный документ имеет уже валидный HTML и включает сгенерированный app.css файл стилей. Кроме того, в подвале документа мы видим pipe.min.js скрипт, отвечающий за live reloading функционал, который используется исключительно в режиме разработки.
Для того, чтобы открыть данный документ в браузере, необходимо перейти по нашему адресу http://127.0.0.1:2020 локального сервера, или воспользоваться командой open из CLI меню:
ungic html: back
ungic: open # или open /, open index.html
После того, как документ открыт в браузере проверим включение наших стилей. Перейдем к render.scss файлу нашего sass компонента D:\mydir\App\source\scss\components\app\render.scss и напишем что нибудь для проверки:
@use ".core" as this;
@use "ungic.theme"as theme;
@use "functions"as *;
@use "mixins"as *;
@use "ungic.meta"as un-meta;
@use "ungic.utils"as un-utils;
@use "sass:meta"as meta;
@use "sass:map"as map;
@include this.component {
// Добавим текст
&:after {
content: 'Test!';
}
// и инвертируем цвета, чтобы было заметно
color: theme.color(background-color);
background-color: theme.color(text-color);
}
Однако, после сохранения файла, изменений в браузере мы не увидим, так как, mixin this.component создает обертку относительно имени scss компонента .app, для этого, поправим наш исходный source/html/index.html html файл и добавим .app элемент на страницу:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<un-pipe css="app"></un-pipe>
<title>My first page</title>
</head>
<body>
<!-- Добавим контейнер app -->
<div class="app"></div>
</body>
</html>
В ту же секунду, в браузере появится результат нашей работы!
# Добавление иконок
Берем подготовленные SVG файлы и помещаем их в рабочую директорию source/icons icons плагина. Вот, что получилось у меня:
.
├── source
│ ├── icons
| | ├── magic.svg
│ │ └── idea.svg
После добавления SVG файлов в dist директории появится новый документ demo-icons.html который генерируется автоматически icons плагином и содержит демо иконок проекта, откроем данный документ в браузере:
ungic: open demo-icons
Перед нами появится страница с двумя иконками.
TIP
Icons плагин автоматически генерирует demo-icons.html html страницу со всеми иконками проекта, по клику на иконке в буфер обмена сохраняется её ID.
# Использование иконок
Более подробное руководство по использованию иконок в ungic, смотрите в следующем разделе.
Для использования иконок в HTML странице, существует специальный handlebars icon helper:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<un-pipe css="app"></un-pipe>
<title>My first page</title>
</head>
<body>
<!-- Используем icon инструмент и передаем ID нашей иконки -->
<div class="app">{{{icon "magic"}}}</div>
</body>
</html>
Если открыть сгенерированную index.html страницу и посмотреть на её содержимое, то можно увидеть что наша иконка по умолчанию была сгенерирована в <i/> тег как шрифт, а наша задача, получить SVG спрайт
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" data-component="app" href="http://127.0.0.1:2020/css/app.css?v=1604314551388">
<title>My first page</title>
<link rel="stylesheet" href="http://127.0.0.1:2020/ungic/css/devtools.css">
<!-- Сгенерированный временный шрифт -->
<link rel="stylesheet" href="http://127.0.0.1:2020/ungic/font-icons">
</head>
<body>
<div class="app">
<!-- Наша иконка -->
<i aria-hidden="true" class="icon icon-magic"></i>
<span class="icon-label">magic</span>
</div>
<script src="http://127.0.0.1:2020/ungic/js/dist/pipe.min.js" data-connect="http://127.0.0.1:2020" data-src="index.html"></script>
</body>
</html>
для этого, нужно изменить режим генерации иконок, а точнее svgIconsMode параметр в конфигурационном ungic.config.json файле в build.plugins.icons.dev разделе или воспользоваться временным решением, которое будет работать до перезагрузки проекта, а точнее командой svgmode из меню icons плагина:
ungic icons: svgmode svgSprite
------- System -------
| SVG icons generation mode switched to svgSprite!
----------------------
Проверяем исходных код нашей index.html страницы:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" data-component="app" href="http://127.0.0.1:2020/css/app.css?v=1604318866688">
<title>My first page</title>
<link rel="stylesheet" href="http://127.0.0.1:2020/ungic/css/devtools.css">
<!-- Ссылка на шрифт пропала -->
</head>
<body>
<div class="app">
<!-- Иконка шрифта заменилась на SVG -->
<svg class="ungic-icon" role="img" aria-labelledby="un_8i6w7ueqn" width="2em" height="2em">
<title id="un_8i6w7ueqn">magic</title>
<use href="#svg-icon-magic" />
</svg>
</div>
<script src="http://127.0.0.1:2020/ungic/js/dist/pipe.min.js" data-connect="http://127.0.0.1:2020" data-src="index.html"></script>
<!-- а также, добавился svg sprite к документу -->
<svg class="ungic-svg-sprite" style="display:none">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.997 511.997" fill="currentcolor" id="svg-icon-idea">
<path d="M57.318 166.155H12.746C5.905 166.155.36 171.7.36 178.541s5.545 12.386 12.386 12.386h44.571c6.842 0 12.387-5.545 12.387-12.386s-5.545-12.386-12.386-12.386z" />
<path d="M499.251 166.155h-44.572c-6.84 0-12.386 5.545-12.386 12.386s5.546 12.386 12.386 12.386h44.572c6.84 0 12.386-5.545 12.386-12.386s-5.546-12.386-12.386-12.386z" />
<path d="M108.347 326.191c-4.837-4.837-12.679-4.837-17.517 0l-32.42 32.42c-4.837 4.837-4.837 12.679 0 17.517 2.419 2.419 5.589 3.628 8.758 3.628s6.34-1.209 8.758-3.628l32.421-32.42c4.837-4.836 4.837-12.679 0-17.517z" />
<path d="M430.912 3.628c-4.838-4.837-12.678-4.837-17.517 0L381.863 35.16c-4.837 4.837-4.837 12.68 0 17.516a12.359 12.359 0 0 0 8.759 3.627c3.171 0 6.339-1.21 8.758-3.628l31.531-31.531c4.837-4.837 4.837-12.68.001-17.516z" />
<path d="M130.117 35.142L98.602 3.628c-4.837-4.835-12.68-4.835-17.517 0-4.837 4.837-4.837 12.68 0 17.517L112.6 52.66c2.419 2.418 5.589 3.628 8.758 3.628s6.34-1.21 8.758-3.628c4.837-4.837 4.837-12.68.001-17.518z" />
<path d="M453.585 358.615l-32.3-32.303c-4.838-4.837-12.678-4.837-17.517.001-4.837 4.837-4.837 12.68 0 17.516l32.301 32.301a12.347 12.347 0 0 0 8.758 3.628c3.171 0 6.339-1.21 8.758-3.628 4.837-4.836 4.837-12.679 0-17.515z" />
<path d="M255.999 33.636c-85.648 0-155.327 72.885-155.327 162.474 0 41.65 14.919 86.482 40.933 123 19.979 28.045 30.538 59.249 30.538 90.24v77.875c0 13.659 11.113 24.772 24.772 24.772h118.169c13.659 0 24.772-11.113 24.772-24.772V409.35c0-30.99 10.559-62.195 30.536-90.24 26.014-36.517 40.934-81.35 40.934-123-.002-89.589-69.681-162.474-155.327-162.474zm59.083 453.591H196.913v-16.201h59.085c6.841 0 12.387-5.545 12.387-12.386s-5.546-12.386-12.387-12.386h-59.085v-16.2h118.172l.014 57.171c-.001.002-.006.002-.017.002zm-76.453-231.086l-16.564-35.387h67.866l-16.562 35.387a12.414 12.414 0 0 0-1.142 4.43l-9.605 144.711h-13.247l-9.605-144.711a12.413 12.413 0 0 0-1.141-4.43zm111.586 48.597c-22.123 31.056-34.208 65.733-35.082 100.544h-27.684l9.341-140.749 23.831-50.915a12.385 12.385 0 0 0-11.218-17.637H202.592a12.385 12.385 0 0 0-11.218 17.636l23.832 50.915 9.341 140.749h-27.686c-.874-34.812-12.958-69.488-35.082-100.544-22.754-31.942-36.338-72.551-36.338-108.628 0-75.93 58.567-137.702 130.555-137.702s130.555 61.772 130.555 137.702c.002 36.079-13.582 76.688-36.336 108.629z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentcolor" id="svg-icon-magic">
<path d="M494.1 165.9l-36-48.2 19.3-57c3.8-11.2-2.2-23.3-13.4-27.1-4.4-1.5-9.3-1.5-13.7 0l-57 19.3-48.2-36c-9.4-7-22.8-5.1-29.9 4.3-2.8 3.8-4.3 8.3-4.2 13l.8 60.2-49.1 34.8c-9.6 6.8-11.9 20.1-5.1 29.7 2.7 3.8 6.6 6.7 11.1 8.1l35.2 10.9L6.3 475.6l30.2 30.2 297.1-297.1 10.5 33.8c2.4 7.8 9 13.5 17 14.7 1.1.2 2.2.3 3.3.3 6.9 0 13.4-3.4 17.4-9l34.8-49.1 60.2.8h.3c11.8 0 21.3-9.6 21.3-21.3 0-4.8-1.5-9.3-4.3-13z" />
<path d="M433.3 342.6c-20.9-.2-37.8-17.3-37.7-38.2 0-2.9-2.4-5.3-5.3-5.3s-5.3 2.4-5.3 5.3c.1 20.9-16.7 38-37.7 38.2-2.9 0-5.3 2.4-5.3 5.3s2.4 5.3 5.3 5.3c20.9.2 37.8 17.3 37.7 38.2 0 2.9 2.4 5.3 5.3 5.3s5.3-2.4 5.3-5.3c-.1-20.9 16.7-38 37.7-38.2 2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3z" />
<path d="M171.2 54.6c20.9.2 37.8 17.3 37.7 38.2 0 2.9 2.4 5.3 5.3 5.3s5.3-2.4 5.3-5.3c-.1-20.9 16.7-38 37.7-38.2 2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3c-20.9-.2-37.8-17.3-37.7-38.2 0-2.9-2.4-5.3-5.3-5.3s-5.3 2.4-5.3 5.3c.1 20.9-16.7 38-37.7 38.2-2.9 0-5.3 2.4-5.3 5.3s2.4 5.3 5.3 5.3z" />
<path d="M37.9 233.3c20.9.2 37.8 17.3 37.7 38.2 0 2.9 2.4 5.3 5.3 5.3s5.3-2.4 5.3-5.3c-.1-20.9 16.7-38 37.7-38.2 2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3c-20.9-.2-37.8-17.3-37.7-38.2 0-2.9-2.4-5.3-5.3-5.3s-5.3 2.4-5.3 5.3c.1 20.9-16.7 38-37.7 38.2-2.9 0-5.3 2.4-5.3 5.3s2.4 5.3 5.3 5.3z" />
</symbol>
</svg>
</body>
</html>
# Создание релиза
Переходим в главное меню и используем команду release
ungic: release app
? Do you want to configure release? No # Релиз можно сконфигурировать на данном этапе
------- System: scss -------
| app release successfully generated to D:\mydir\App\dist\releases\app-v1.0.0
----------------------------
------- System: icons -------
| svgSprite release successfully generated to D:\mydir\App\dist\releases\app-v1.0.0
-----------------------------
------- System: CLI -------
| app release successfully generated to D:\mydir\App\dist\releases\app-v1.0.0
---------------------------
Релиз был успешно сгенерирован, смотрим полученный сгенерированный dist\releases\app-v1.0.0\index.html документ
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
<link rel="stylesheet" href="css/v1604389504-app.css">
<link rel="stylesheet" href="css/v1604389504-fonts-ungic.css">
</head>
<body>
<div class="app"><i aria-hidden="true" class=" icon icon-magic"></i><span class="icon-label">magic</span></div>
</body>
</html>
как видим выше, сгенерированный релиз не соответствует нашим требованиям, иконки сгенерировались как шрифты, а не как SVG спрайт. Это связанно с тем, что релиз имеет собственную конфигурацию, которую предварительно нужно настроить в конфигурационном файле проекта, или настроить релиз непосредственно с помощью CLI меню. Подробнее о создании релиза.
В нашем случае, мы создадим конкретную конфигурацию для нашего app релиза, который будет состоять только их тех компонентов, которые нам необходимы
конфигурация целиком
{
"mode": "development",
"server": {
"port": 2020
},
"version": "1.0.0",
"build": {
"releases": {
"default": {
"saveAllAssets": true,
"host": "https://unbywyd.com",
"noConflict": true,
"urlsOptimization": true,
"scssBuildName": "default",
"htmlBuildName": "default",
"iconsBuildName": "default",
"includeOnlyUsedComponents": false,
"combineIcons": true,
"combineScssComponents": true
},
// Добавим конфигурацию для общего релиза
"app": {
// Укажем имена релиза для каждого плагина
"scssBuildName": "app",
"htmlBuildName": "app",
"iconsBuildName": "app",
// Сгенерировать только то, что используем
"includeOnlyUsedComponents": true
}
},
"plugins": {
"html": {
"dev": {
"formatting": "beautify",
"validation": false
},
"release": {
"configs": {
"default": {
"formatting": "beautify",
"validation": false,
"includeLocalStyles": false,
"mergeInternalStyles": false,
"optimizeInternalStyles": false,
"includeLocalScripts": false,
"internalScriptsToFooter": false,
"externalScriptsToFooter": false,
"mergeInternalScripts": false,
"optimizeInternalScripts": false
}
},
"build": {
"default": {
"pages": "*",
"excludePages": [],
"configId": "default"
},
// Конфигурация релиза для HTML плагина
"app": {
"pages": [
"index.html"
]
}
}
}
},
"scss": {
"dev": {
"inverse": true,
"autoprefixer": true,
"defaultInverse": false,
"direction": "ltr",
"oppositeDirection": true,
"theme": "default"
},
"release": {
"configs": {
"default": {
"themeMode": "external",
"inverseMode": "combined",
"inverse": true,
"defaultInverse": false,
"autoprefixer": true,
"direction": "ltr",
"oppositeDirection": true
}
},
"build": {
"default": {
"configId": "default",
"themes": [],
"defaultTheme": "default",
"components": "*",
"excludeComponents": []
},
// Конфигурация релиза для SCSS плагина
"app": {
"inverse": false // Можно вынести в отдельный конфиг
}
}
}
},
"icons": {
"dev": {
"svgIconsMode": "fonts",
"sprites": true,
"svgIcons": true
},
"release": {
"configs": {
"default": {
"svgIconsMode": "fonts"
},
// Добавим доп. конфиг для смены режима генерации иконок
"svgSprite": {
"svgIconsMode": "svgSprite"
}
},
"build": {
"default": {
"configId": "default",
"svgIcons": true,
"sprites": "**/*.png"
},
// Конфигурация релиза для ICONS плагина
// выберем конфиг с требуемым режимом генерации иконок
"app": {
"configId": "svgSprite"
}
}
}
}
}
},
"author": "unbywyd",
"openInBrowser": true,
"fs": {
"dirs": {
"source": "source",
"dist": "dist",
"temp": "temp"
},
"dist": {
"css": "css",
"fonts": "fonts",
"img": "img",
"js": "js"
},
"source": {
"scss": "scss",
"html": "html",
"icons": "icons",
"assets": "assets"
}
},
"plugins": {
"scss": {
"rtlPrefix": {
"prefixType": "attribute",
"prefix": ""
},
"advancedExport": false,
"cleancss": true
},
"html": {
"beautify": {},
"minifier": {},
"cheerio": {
"decodeEntities": false
},
"replaceAmpToSymbol": true,
"cleancss": {},
"relativeSrc": false,
"deleteFromDist": false
},
"icons": {
"startCodepoint": 61696,
"sprites": {
"className": "sprite",
"maxWidth": 70,
"maxHeight": false
},
"svgSprite": {
"width": "2em",
"height": "2em",
"external": false,
"removeColors": true,
"className": "svg-icon"
},
"fonts": {
"name": "ungic",
"fixedWidth": false,
"fontHeight": 512,
"centerHorizontally": true,
"normalize": true,
"fontWeight": 400,
"className": "icon",
"fontSize": "2em",
"lables": true
}
}
},
"verbose": false,
"name": "App",
"browserslist": {
"development": [
"defaults",
"not IE 11",
"not IE_Mob 11",
"maintained node versions"
]
}
}
Повторяем нашу release app команду и смотрим полученный результат:
ungic: release app
? Do you want to configure release? No
------- System: scss -------
| app release successfully generated to D:\mydir\App\dist\releases\app-v1.0.0
----------------------------
------- System: icons -------
| svgSprite release successfully generated to D:\mydir\App\dist\releases\app-v1.0.0
-----------------------------
------- System: CLI -------
| app release successfully generated to D:\mydir\App\dist\releases\app-v1.0.0
---------------------------
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
<!-- Выбранный нами хост -->
<link rel="stylesheet" href="https://unbywyd.com/css/v1604391951-app.css">
</head>
<body>
<div class="app">
<!-- SVG Sprite иконка -->
<svg class="ungic-icon" role="img" aria-labelledby="un_1o6ho76pf" width="2em" height="2em">
<title id="un_1o6ho76pf">magic</title>
<use href="#svg-icon-magic" />
</svg>
</div>
<!-- SVG Sprite только с одной иконкой которую мы использовали в данном документе -->
<svg class="ungic-svg-sprite" style="display:none">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentcolor" id="svg-icon-magic">
<path d="M494.1 165.9l-36-48.2 19.3-57c3.8-11.2-2.2-23.3-13.4-27.1-4.4-1.5-9.3-1.5-13.7 0l-57 19.3-48.2-36c-9.4-7-22.8-5.1-29.9 4.3-2.8 3.8-4.3 8.3-4.2 13l.8 60.2-49.1 34.8c-9.6 6.8-11.9 20.1-5.1 29.7 2.7 3.8 6.6 6.7 11.1 8.1l35.2 10.9L6.3 475.6l30.2 30.2 297.1-297.1 10.5 33.8c2.4 7.8 9 13.5 17 14.7 1.1.2 2.2.3 3.3.3 6.9 0 13.4-3.4 17.4-9l34.8-49.1 60.2.8h.3c11.8 0 21.3-9.6 21.3-21.3 0-4.8-1.5-9.3-4.3-13z" />
<path d="M433.3 342.6c-20.9-.2-37.8-17.3-37.7-38.2 0-2.9-2.4-5.3-5.3-5.3s-5.3 2.4-5.3 5.3c.1 20.9-16.7 38-37.7 38.2-2.9 0-5.3 2.4-5.3 5.3s2.4 5.3 5.3 5.3c20.9.2 37.8 17.3 37.7 38.2 0 2.9 2.4 5.3 5.3 5.3s5.3-2.4 5.3-5.3c-.1-20.9 16.7-38 37.7-38.2 2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3z" />
<path d="M171.2 54.6c20.9.2 37.8 17.3 37.7 38.2 0 2.9 2.4 5.3 5.3 5.3s5.3-2.4 5.3-5.3c-.1-20.9 16.7-38 37.7-38.2 2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3c-20.9-.2-37.8-17.3-37.7-38.2 0-2.9-2.4-5.3-5.3-5.3s-5.3 2.4-5.3 5.3c.1 20.9-16.7 38-37.7 38.2-2.9 0-5.3 2.4-5.3 5.3s2.4 5.3 5.3 5.3z" />
<path d="M37.9 233.3c20.9.2 37.8 17.3 37.7 38.2 0 2.9 2.4 5.3 5.3 5.3s5.3-2.4 5.3-5.3c-.1-20.9 16.7-38 37.7-38.2 2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3c-20.9-.2-37.8-17.3-37.7-38.2 0-2.9-2.4-5.3-5.3-5.3s-5.3 2.4-5.3 5.3c.1 20.9-16.7 38-37.7 38.2-2.9 0-5.3 2.4-5.3 5.3s2.4 5.3 5.3 5.3z" />
</symbol>
</svg>
</body>
</html>
Вот и все, передаем нашему клиенту .zip архив релиза, который находится в директории нашего релиза D:\mydir\App\dist\releases\app-v1.0.0\app-v1.0.0.zip