diff --git a/demo/index.html b/demo/index.html index ab5634b..33e0b39 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,6 +4,9 @@ VMK UI Kit Demo + + + diff --git a/docs/getting-started.md b/docs/getting-started.md index 925f694..4798b5c 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -9,6 +9,9 @@ ## HTML/JS ```html + + + @@ -26,6 +29,14 @@ import { GnButton, GnTabs } from "vmk-ui-kit/vue"; ``` +Убедитесь, что шрифт Plus Jakarta Sans подключён в HTML вашего приложения: + +```html + + + +``` + Или глобальная регистрация: ```js @@ -36,12 +47,17 @@ createApp(App).use(VMKUiVue).mount("#app"); ``` -Иконки — Phosphor Icons, всегда с base class `ph`: +Иконки — SVG из набора, предоставленного дизайном. В HTML/JS используйте `VMKUIKit.Icons.iconNode(name)` или inline SVG. В Vue передавайте имя иконки в prop `icon`: ```html - + + + ``` ```vue -Home + +Next ``` + +Для обратной совместимости с `gnexus-ui-kit` компоненты также поддерживают имена в стиле Phosphor Icons (`ph-house`) — они будут мапиться на ближайшую SVG-иконку из набора. diff --git a/examples/vue/index.html b/examples/vue/index.html index 1f24e14..9819d6a 100644 --- a/examples/vue/index.html +++ b/examples/vue/index.html @@ -4,6 +4,9 @@ VMK UI Kit Vue Example + + +
diff --git a/src/js/index.js b/src/js/index.js index d9c29e4..82e36d3 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -3,7 +3,11 @@ * Mirrors the public API surface of gnexus-ui-kit for compatibility. */ -const api = {}; +import * as Icons from "./components/icon-helper.js"; + +const api = { + Icons +}; if (typeof window !== "undefined") { window.VMKUIKit = api; @@ -13,4 +17,5 @@ }); } +export { Icons }; export default api;