feat: update docs (Icon Config)

Author: TFX-98

packages/docs/page-config/services/icons-config/code/redefine-icons.ts

@@ -0,0 +1,29 @@
+const aliases = [
+  {
+    name: "va-unsorted",
+    resolve: () => ({
+      // Custom class: sort icon is invisible until hovered
+      class: `fa-solid fa-sort va-icon--hidden-before-hover`,
+    }),
+  },
+  { name: "va-sort-asc", to: "fa-sort-up" },
+  { name: "va-sort-desc", to: "fa-sort-down" },
+  { name: "va-arrow-first", to: "fa-backward-step" },
+  { name: "va-arrow-last", to: "fa-forward-step" },
+  { name: "va-arrow-right", to: "fa-angle-right" },
+  { name: "va-arrow-left", to: "fa-angle-left" },
+  { name: "va-arrow-down", to: "fa-angle-down" },
+  { name: "va-arrow-up", to: "fa-angle-up" },
+  { name: "va-calendar", to: "fa-regular fa-calendar" },
+  { name: "va-delete", to: "fa-trash" },
+  { name: "va-check", to: "fa-check" },
+  { name: "va-check-circle", to: "fa-circle-check" },
+  { name: "va-warning", to: "fa-triangle-exclamation" },
+  { name: "va-clear", to: "fa-regular fa-circle-xmark" },
+  { name: "va-close", to: "fa-xmark" },
+  { name: "va-loading", to: "fa-solid fa-rotate fa-flip-vertical" },
+  { name: "va-plus", to: "fa-plus" },
+  { name: "va-minus", to: "fa-minus" },
+
+  { name: "va-unfold-more", to: "fa-sort" },
+];

packages/docs/page-config/services/icons-config/index.ts

@@ -64,6 +64,10 @@ export default definePageConfig({
     block.paragraph("We use some icons in our components by default. You can redefine them by changing it's alias."),
     block.component("icon-aliases"),
 
+    block.headline("How to redefine default icons"),
+    block.paragraph("Here's how you can use aliases to redefine default Vuestic icons in case you're using your own icon solution."),
+    block.code("redefine-icons"),
+
     // setup
     block.subtitle("Let's build our config"),
     block.paragraph("We need to update icons config in our global config. Icons config is a flat array with Vuestic default font and aliases. We can use the `createIconsConfig()` helper to create a new config with Vuestic defaults and our custom fonts and aliases merged together. For example:"),