@koobiq/icons 7.1.0

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# 7.1.0 "Wistful Magi" (2023-08-18)
+
+### Icons
+
+ * feature  change npm scope to koobiq f4c38b0
+
+## 7.0.8 "Yellowy Calash" (2023-06-28)
+
+### Icons
+
+ * bug fix  имя fontFamily и font-styles 3594549
+
+## 7.0.7 "Disjoint Janke" (2023-06-28)
+
+### Icons
+
+ * bug fix  добавление в инфо file-empty_16 bded8be
+ * bug fix  размер иконок для шрифта dc08971
+
+## 7.0.6 "Hardball Embarkation" (2023-06-26)
+
+## 7.0.5 "Candescent Unavoidable" (2023-06-26)
+
+## 7.0.4 "Quatern X 3" (2023-06-26)
+
+### Icons
+
+ * bug fix  генерация спрайта 2d2240c
+ * bug fix  приведение формата пакета 064008e
+
+## 7.0.3 "Quincentenary Holder" (2023-06-26)
+
+## 7.0.2 "Happening Yannick" (2023-06-26)
+
+### Icons
+
+ * feature  добавление иконок svg file-empty, triandle-left, upload-to-cloud f3b7f0c
+
+## 7.0.1 "Flavor Icons" (2023-06-26)
+
+# 1.0.0 "Zoogenic Catmint" (2022-12-28)
+
+### Icons
+
+ * bug fix  **build:** заливка SVG иконок d3a5c63
+ * bug fix  **build:** codepoint convert from hex to numeric 5cf4a21
+ * feature  **build:** настройка публикации пакета (#DS-1244) 09a4452
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Mike Ozornin, Oleg Pimenov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# Icons
+
+# How to use package
+
+```
+npm i @koobiq/icons
+```
+
+# Package structure
+
+```bash
+.
+├── CHANGELOG.md
+├── LICENSE
+├── README.md
+├── dist
+│   ├── fonts
+│   │   ├── mc-icons.css
+│   │   ├── mc-icons.html
+│   │   ├── mc-icons.scss
+│   │   ├── mc-icons.ttf
+│   │   └── mc-icons.woff
+│   ├── info
+│   │   └── mc-icons-info.json
+│   ├── svg
+│   │   ├── angle-down-L_16.svg
+│   │   ├── angle-down-L_24.svg
+│   │   ├── angle-down-M_16.svg
+│   │   └── angle-down-M_24.svg
+│   └── symbol
+│       ├── sprite.scss
+│       ├── sprite.symbol.html
+│       └── svg
+│           └── sprite.symbol.svg
+└── package.json
+```
+
+# How to rebuild package locally
+
+## Install dependencies
+Install dependencies by running:
+
+```
+npm install
+```
+
+## Sync with Figma
+
+Create a file with name `.env` and add there your Figma access token.
+
+```
+npm run figma:sync
+```
+
+## Build all packages
+
+```
+npm run build:all
+```
+
+Output will be exported to a `dist/icons` folder.
+
+# Publish new version
+
+## Step 1. Prepare and environment
+Install dependencies by running:
+
+```
+npm install
+```
+
+## Step 2. Draw an icon
+
+1. Draw your icon in [Mosaic Icons](https://www.figma.com/file/oQC47kSeukdqLMNh4IUhke/Mosaic-icons?type=design&node-id=0-4&mode=design&t=KCsYZb777ReIZMPY-11) figma file.
+1. Make icons contains the only single outlined and flattened path with name `shape` (second-color path with name `shape-2`). 
+1. Using a Fill Rule Editor plugin, set shapes' fill rule to Non-zero fill. Make sure icon is rendered correctly.
+1. Run flatten for shapes one more time (there is a bug in Figma).
+
+## Step 3. Export icons from figma
+
+Create a file with name `.env` and add there your Figma access token.
+
+To export your icons (SVG) from Figma run the command:
+```
+npm run figma:sync
+```
+
+## Step 4.
+
+Change `mapping.json`:
+* Add an entry into `mapping.json` with a new codepoint keys.
+* Edit the name of an icon in the `mapping.json` in case of icon rename
+
+Commit SVG files `mapping.json` and and push all changes to git.
+
+## Step 5.
+
+Run stage commit script to create a new release tag.
+```
+npm run stage:commit
+```
+
+Use semver for version naming. So increment major (first) version number if any of these changes were made:
+
+* Any icon name was changed (breaking changes for front-end developers)
+* Any icon codepoint was changed (breaking changes for tech writers)
+* Significant changes in icon metaphor (breaking changes for all)
+
+# Using CSS Classes
+Create a DOM element/container that contains ```mc-icon``` and the icon name like:
+
+```html
+<div class='mc-icon mc-angle-down-L_16'></div>
+
+```
+# Using SVG sprites
+
+When needing to use the `sprite.symbol.svg` sprite file, you can reference icons using the following method:
+
+```html
+<svg>
+    <use xlink:href="sprite.symbol.svg#add" />
+</svg>
+```

package/dist/fonts/mc-icons.css

@@ -0,0 +1,371 @@
+@font-face {
+font-family: "PT Mosaic Icons";
+font-weight:normal;
+font-style:normal;
+src: url("./mc-icons.ttf?e8b794fcdc13cb9b03ea73d526850d3a") format("truetype"),
+url("./mc-icons.woff?e8b794fcdc13cb9b03ea73d526850d3a") format("woff");
+}
+
+.mc {
+font-family: "PT Mosaic Icons";
+display: inline-block;
+vertical-align:middle;
+line-height:1;
+font-weight:normal;
+font-style:normal;
+speak:none;
+text-decoration: none;
+text-transform:none;
+text-rendering:auto;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+}
+
+/*---------------------
+*  Icons
+*-------------------*/
+
+    .mc-angle-down-L_16:before {
+        content: "\f101";
+        font-size: 16px;
+    }
+    .mc-angle-down-M_16:before {
+        content: "\f102";
+        font-size: 16px;
+    }
+    .mc-angle-down-S_16:before {
+        content: "\f103";
+        font-size: 16px;
+    }
+    .mc-calendar_16:before {
+        content: "\f104";
+        font-size: 16px;
+    }
+    .mc-check_16:before {
+        content: "\f105";
+        font-size: 16px;
+    }
+    .mc-circle-8_16:before {
+        content: "\f106";
+        font-size: 16px;
+    }
+    .mc-clock_16:before {
+        content: "\f107";
+        font-size: 16px;
+    }
+    .mc-close-L_16:before {
+        content: "\f108";
+        font-size: 16px;
+    }
+    .mc-close-M_16:before {
+        content: "\f109";
+        font-size: 16px;
+    }
+    .mc-close-S_16:before {
+        content: "\f10a";
+        font-size: 16px;
+    }
+    .mc-ellipsis_16:before {
+        content: "\f10b";
+        font-size: 16px;
+    }
+    .mc-folder-closed_16:before {
+        content: "\f10c";
+        font-size: 16px;
+    }
+    .mc-folder-opened_16:before {
+        content: "\f10d";
+        font-size: 16px;
+    }
+    .mc-gear_16:before {
+        content: "\f10e";
+        font-size: 16px;
+    }
+    .mc-hamburger_16:before {
+        content: "\f10f";
+        font-size: 16px;
+    }
+    .mc-pause_16:before {
+        content: "\f110";
+        font-size: 16px;
+    }
+    .mc-play_16:before {
+        content: "\f111";
+        font-size: 16px;
+    }
+    .mc-stop_16:before {
+        content: "\f112";
+        font-size: 16px;
+    }
+    .mc-triangle-down_16:before {
+        content: "\f113";
+        font-size: 16px;
+    }
+    .mc-upload-to-cloud_24:before {
+        content: "\f114";
+        font-size: 24px;
+    }
+    .mc-upload-to-cloud_64:before {
+        content: "\f115";
+        font-size: 64px;
+    }
+    .mc-error_16:before {
+        content: "\f116";
+        font-size: 16px;
+    }
+    .mc-info_16:before {
+        content: "\f117";
+        font-size: 16px;
+    }
+    .mc-search_16:before {
+        content: "\f118";
+        font-size: 16px;
+    }
+    .mc-download_16:before {
+        content: "\f119";
+        font-size: 16px;
+    }
+    .mc-copy-o_16:before {
+        content: "\f11a";
+        font-size: 16px;
+    }
+    .mc-minus_16:before {
+        content: "\f11b";
+        font-size: 16px;
+    }
+    .mc-angle-up-L_16:before {
+        content: "\f11c";
+        font-size: 16px;
+    }
+    .mc-angle-up-M_16:before {
+        content: "\f11d";
+        font-size: 16px;
+    }
+    .mc-angle-up-S_16:before {
+        content: "\f11e";
+        font-size: 16px;
+    }
+    .mc-angle-left-L_16:before {
+        content: "\f11f";
+        font-size: 16px;
+    }
+    .mc-angle-left-M_16:before {
+        content: "\f120";
+        font-size: 16px;
+    }
+    .mc-angle-left-S_16:before {
+        content: "\f121";
+        font-size: 16px;
+    }
+    .mc-angle-right-L_16:before {
+        content: "\f122";
+        font-size: 16px;
+    }
+    .mc-angle-right-M_16:before {
+        content: "\f123";
+        font-size: 16px;
+    }
+    .mc-angle-right-S_16:before {
+        content: "\f124";
+        font-size: 16px;
+    }
+    .mc-bell_32:before {
+        content: "\f125";
+        font-size: 32px;
+    }
+    .mc-hamburger_32:before {
+        content: "\f126";
+        font-size: 32px;
+    }
+    .mc-close-L_32:before {
+        content: "\f127";
+        font-size: 32px;
+    }
+    .mc-angle-right-M_32:before {
+        content: "\f128";
+        font-size: 32px;
+    }
+    .mc-triangle-up_16:before {
+        content: "\f129";
+        font-size: 16px;
+    }
+    .mc-bell-o_16:before {
+        content: "\f12a";
+        font-size: 16px;
+    }
+    .mc-bell-off-o_16:before {
+        content: "\f12b";
+        font-size: 16px;
+    }
+    .mc-download_32:before {
+        content: "\f12c";
+        font-size: 32px;
+    }
+    .mc-triangle-left_16:before {
+        content: "\f12d";
+        font-size: 16px;
+    }
+    .mc-triangle-right_16:before {
+        content: "\f12e";
+        font-size: 16px;
+    }
+    .mc-upload-to-cloud_16:before {
+        content: "\f12f";
+        font-size: 16px;
+    }
+    .mc-upload-to-cloud_32:before {
+        content: "\f130";
+        font-size: 32px;
+    }
+    .mc-bell_16:before {
+        content: "\f131";
+        font-size: 16px;
+    }
+    .mc-copy_16:before {
+        content: "\f132";
+        font-size: 16px;
+    }
+    .mc-folder-search_16:before {
+        content: "\f133";
+        font-size: 16px;
+    }
+    .mc-folder-search-opened_16:before {
+        content: "\f134";
+        font-size: 16px;
+    }
+    .mc-info-o_16:before {
+        content: "\f135";
+        font-size: 16px;
+    }
+    .mc-close-circle_16:before {
+        content: "\f136";
+        font-size: 16px;
+    }
+    .mc-bento_16:before {
+        content: "\f137";
+        font-size: 16px;
+    }
+    .mc-bento_32:before {
+        content: "\f138";
+        font-size: 32px;
+    }
+    .mc-new-tab_16:before {
+        content: "\f139";
+        font-size: 16px;
+    }
+    .mc-external-link_16:before {
+        content: "\f13a";
+        font-size: 16px;
+    }
+    .mc-bento_24:before {
+        content: "\f13b";
+        font-size: 24px;
+    }
+    .mc-angle-down-L_24:before {
+        content: "\f13c";
+        font-size: 24px;
+    }
+    .mc-angle-down-M_24:before {
+        content: "\f13d";
+        font-size: 24px;
+    }
+    .mc-angle-left-L_24:before {
+        content: "\f13e";
+        font-size: 24px;
+    }
+    .mc-angle-left-M_24:before {
+        content: "\f13f";
+        font-size: 24px;
+    }
+    .mc-angle-right-L_24:before {
+        content: "\f140";
+        font-size: 24px;
+    }
+    .mc-angle-right-M_24:before {
+        content: "\f141";
+        font-size: 24px;
+    }
+    .mc-angle-up-L_24:before {
+        content: "\f142";
+        font-size: 24px;
+    }
+    .mc-angle-up-M_24:before {
+        content: "\f143";
+        font-size: 24px;
+    }
+    .mc-bell-o_24:before {
+        content: "\f144";
+        font-size: 24px;
+    }
+    .mc-chart-bar_24:before {
+        content: "\f145";
+        font-size: 24px;
+    }
+    .mc-ellipsis_24:before {
+        content: "\f146";
+        font-size: 24px;
+    }
+    .mc-folder-open-o_24:before {
+        content: "\f147";
+        font-size: 24px;
+    }
+    .mc-list_24:before {
+        content: "\f148";
+        font-size: 24px;
+    }
+    .mc-question-circle_24:before {
+        content: "\f149";
+        font-size: 24px;
+    }
+    .mc-search_24:before {
+        content: "\f150";
+        font-size: 24px;
+    }
+    .mc-user-o_24:before {
+        content: "\f151";
+        font-size: 24px;
+    }
+    .mc-user_16:before {
+        content: "\f152";
+        font-size: 16px;
+    }
+    .mc-eye_16:before {
+        content: "\f153";
+        font-size: 16px;
+    }
+    .mc-eye-crossed_16:before {
+        content: "\f154";
+        font-size: 16px;
+    }
+    .mc-color-palette_16:before {
+        content: "\f155";
+        font-size: 16px;
+    }
+    .mc-globe_16:before {
+        content: "\f156";
+        font-size: 16px;
+    }
+    .mc-theme_16:before {
+        content: "\f157";
+        font-size: 16px;
+    }
+    .mc-success_16:before {
+        content: "\f158";
+        font-size: 16px;
+    }
+    .mc-word-wrap_16:before {
+        content: "\f159";
+        font-size: 16px;
+    }
+    .mc-word-wrap-slash_16:before {
+        content: "\f15a";
+        font-size: 16px;
+    }
+    .mc-file-empty_16:before {
+        content: "\f15c";
+        font-size: 16px;
+    }
+    .mc-cloud-404_256:before {
+        content: "\f14a";
+        font-size: 256px;
+    }