Updated Icon Config docs.

packages/docs/src/locales/en/en.json

@@ -1381,7 +1381,7 @@
       },
       "aliasAndFontExample": {
         "twitterColor": "Twitter blue brand color",
-        "VuesticColor": "Vuestic green brand color",
+        "vuesticColor": "Vuestic green brand color",
         "from": "from",
         "alias": "alias",
         "font": "font",
@@ -3483,7 +3483,7 @@
       "about": "We want to use the `<va-icon name='icon-name' />` pattern. We can setup a config for a specific icon name pattern. In that config we provide an icon class, contents (innerHTML) or a Vue component relative to icon name.",
       "fontNamePattern": {
         "title": "Font name pattern",
-        "about": "Font name pattern is similar to vue dynamic routes. We can use dynamic segments to dynamically generate the icon class, content and props. Dynamic segments should be written in curly brackets."
+        "about": "Font name pattern is similar to vue dynamic routes. We can use dynamic segments to dynamically generate `IconConfig` in resolve function. Dynamic segments should be written in curly brackets."
       },
       "example": {
         "title": "Example fonts config",
@@ -3507,7 +3507,8 @@
       "about": "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:"
     },
     "api": {
-      "title": "Icon config API",
+      "title": "IconConfig",
+      "description": "You can use IconConfig properties in aliases, fonts and as return in resolve function.",
       "name": "String or regex. Can be a string with dynamic segment or regex to use this config as font.",
       "iconClass": "Class that will be applied to the icon. Can be a string or a function that accepts dynamic segment value and returns a string.",
       "content": "Content that will be inside the icon. Can be a string or a function that accepts dynamic segment value and returns a string.",

packages/docs/src/page-configs/services/icons-config/examples/font.vue

@@ -9,6 +9,15 @@
       </p>
       }
     </div>
+    <code class="code language-javascript">
+      {
+      <span class="tab"> name: <va-input v-model="regexIconName" />,</span>
+      <span class="tab">
+        resolveFromRegex:
+        (<span class="params"> {{ regexParams }} </span>) => ({ class: <span class="params">`{{ resolved }}`</span> })
+      </span>
+      }
+    </code>
   </div>
 </template>
 
@@ -33,6 +42,22 @@ export default {
       return groups.value.reduce((acc, v) => `${acc} ${v},`, '').slice(0, -1)
     })
 
+    const regexIconName = ref('/(fas|far|fal|fad|fab)-(.*)/')
+    const regexParams = computed(() => {
+      const map = ['code', 'type']
+
+      return regexIconName.value
+        .split('(')
+        .map((g) => {
+          const group = '(' + g
+
+          return (group.match(/\(.*\)/) || [])[0]
+        })
+        .filter((g) => g)
+        .map((g, i) => map[i] || `group${i - 1}`)
+        .join(', ')
+    })
+
     const resolved = computed(() => {
       const classes = groups.value.map((item) => 'fa-${' + `${item}` + '}')
       return `fa ${classes.join(' ')}`
@@ -42,6 +67,8 @@ export default {
       params,
       iconName,
       resolved,
+      regexIconName,
+      regexParams,
     }
   },
 }
@@ -52,9 +79,11 @@ export default {
   background: #f4f8fa;
   color: var(--va-dark);
   padding: 0.5rem;
+  width: 100%;
 
   .tab {
     padding-left: 1rem;
+    display: block;
   }
 
   .params {

packages/docs/src/page-configs/services/icons-config/page-config.ts

@@ -17,15 +17,14 @@ const columns: TableColumn[] = [
 ]
 
 const tableData: TableData = [
-  ['name', 'string | RegExp', 'iconsConfig.api.name'],
   [
     'class',
-    'string | ((...dynamicSegments: string[]) => string) | undefined',
+    'string | undefined',
     'iconsConfig.api.iconClass',
   ],
   [
     'content',
-    'string | ((...dynamicSegments: string[]) => string | undefined) | undefined',
+    'string | undefined',
     'iconsConfig.api.content',
   ],
   [
@@ -34,8 +33,8 @@ const tableData: TableData = [
     'iconsConfig.api.component',
   ],
   [
-    'componentProps',
-    '`Record<string, any> | ((...dynamicSegments: string[]) => Record<string, any>) | undefined`',
+    'attrs',
+    '`Record<string, any> | undefined`',
     'iconsConfig.api.componentProps',
   ],
   ['to', '`string | undefined`', 'iconsConfig.api.to'],
@@ -61,6 +60,11 @@ const config: ApiDocsBlock[] = [
 
   block.paragraph('iconsConfig.problem.summary'),
 
+  // api
+  block.subtitle('iconsConfig.api.title'),
+  block.table(columns, tableData),
+  block.paragraph('iconsConfig.api.description'),
+
   // fonts
   block.subtitle('iconsConfig.fonts.title'),
   block.paragraph('iconsConfig.fonts.about'),
@@ -96,10 +100,6 @@ const config: ApiDocsBlock[] = [
   block.subtitle('iconsConfig.setup.title'),
   block.paragraph('iconsConfig.setup.about'),
   block.code(setupCodeExample),
-
-  // api
-  block.subtitle('iconsConfig.api.title'),
-  block.table(columns, tableData),
 ]
 
 export default config