docs: update dialtone-icons usage

Author: juliodialpad

apps/dialtone-documentation/docs/.vuepress/baseComponents/IconPopoverContent.vue

@@ -83,7 +83,7 @@
 
 <script setup>
 import { computed, nextTick, ref, watch } from 'vue';
-import { v7 as sizes } from '@data/icons-sizes.json';
+import sizes from '@data/icons-sizes.json';
 import CopyButton from './CopyButton.vue';
 
 const props = defineProps({

apps/dialtone-documentation/docs/.vuepress/baseComponents/IconSizesTable.vue

@@ -14,7 +14,6 @@ import ComponentClassTable from './baseComponents/ComponentClassTable.vue';
 import TokenTable from './baseComponents/TokenTable.vue';
 import ComponentVueApi from './baseComponents/ComponentVueApi.vue';
 import WeatherCodesTable from './baseComponents/WeatherCodesTable.vue';
-import IconSizesTable from './baseComponents/IconSizesTable.vue';
 import ComponentAccessibleTable from './baseComponents/ComponentAccessibleTable.vue';
 import ComponentCombinator from './baseComponents/ComponentCombinator.vue';
 import ExampleTabs from './baseComponents/ExampleTabs.vue';
@@ -36,7 +35,6 @@ export default defineClientConfig({
     app.component('TokenTable', TokenTable);
     app.component('ComponentVueApi', ComponentVueApi);
     app.component('WeatherCodesTable', WeatherCodesTable);
-    app.component('IconSizesTable', IconSizesTable);
     app.component('ComponentAccessibleTable', ComponentAccessibleTable);
     app.component('ComponentCombinator', ComponentCombinator);
     app.component('ExampleTabs', ExampleTabs);

apps/dialtone-documentation/docs/.vuepress/client.js

@@ -111,7 +111,7 @@
 </template>
 
 <script setup>
-import { categories } from '@dialpad/dialtone-icons/dist/icons.json';
+import { categories } from '@dialpad/dialtone-icons/dist/keywords.json';
 import { computed, onMounted, ref, watch } from 'vue';
 import IconPopover from '../baseComponents/IconPopover.vue';
 import IconPopoverContent from '../baseComponents/IconPopoverContent.vue';

apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue

@@ -1,99 +1,42 @@
-{
-  "v6": [
+[
   {
-    "size": "14px",
-    "sizeRem": "1.4rem",
-    "variable": "@icon14",
-    "class": "d-svg--size14"
+    "size": "100",
+    "width_height": "12px (1.2rem)",
+    "className": "d-icon--size-100"
   },
   {
-    "size": "16px",
-    "sizeRem": "1.6rem",
-    "variable": "@icon16",
-    "class": "d-svg--size16"
+    "size": "200",
+    "width_height": "14px (1.4rem)",
+    "className": "d-icon--size-200"
   },
   {
-    "size": "18px",
-    "sizeRem": "1.8rem",
-    "variable": "@icon18",
-    "class": "d-svg--size18"
+    "size": "300",
+    "width_height": "18px (1.8rem)",
+    "className": "d-icon--size-300"
   },
   {
-    "size": "20px",
-    "sizeRem": "2.0rem",
-    "variable": "@icon20",
-    "class": "d-svg--size20"
+    "size": "400",
+    "width_height": "20px (2.0rem)",
+    "className": "d-icon--size-400"
   },
   {
-    "size": "24px",
-    "sizeRem": "2.4rem",
-    "variable": "@icon24",
-    "class": "d-svg--size24"
+    "size": "500",
+    "width_height": "24px (2.4rem)",
+    "className": "d-icon--size-500"
   },
   {
-    "size": "32px",
-    "sizeRem": "3.2rem",
-    "variable": "@icon32",
-    "class": "d-svg--size32"
+    "size": "600",
+    "width_height": "32px (3.2rem)",
+    "className": "d-icon--size-600"
   },
   {
-    "size": "48px",
-    "sizeRem": "4.8rem",
-    "variable": "@icon48",
-    "class": "d-svg--size48"
+    "size": "700",
+    "width_height": "38px (3.8rem)",
+    "className": "d-icon--size-700"
   },
   {
-    "size": "64px",
-    "sizeRem": "6.4rem",
-    "variable": "@icon64",
-    "class": "d-svg--size64"
-  },
-  {
-    "size": "100%",
-    "variable": "N/A",
-    "class": "d-svg--size100p"
+    "size": "800",
+    "width_height": "48px (4.8rem)",
+    "className": "d-icon--size-800"
   }
-],
-  "v7": [
-    {
-      "size": 100,
-      "width_height": "12px (1.2rem)",
-      "className": "d-icon--size-100"
-    },
-    {
-      "size": 200,
-      "width_height": "14px (1.4rem)",
-      "className": "d-icon--size-200"
-    },
-    {
-      "size": 300,
-      "width_height": "18px (1.8rem)",
-      "className": "d-icon--size-300"
-    },
-    {
-      "size": 400,
-      "width_height": "20px (2.0rem)",
-      "className": "d-icon--size-400"
-    },
-    {
-      "size": 500,
-      "width_height": "24px (2.4rem)",
-      "className": "d-icon--size-500"
-    },
-    {
-      "size": 600,
-      "width_height": "32px (3.2rem)",
-      "className": "d-icon--size-600"
-    },
-    {
-      "size": 700,
-      "width_height": "38px (3.8rem)",
-      "className": "d-icon--size-700"
-    },
-    {
-      "size": 800,
-      "width_height": "48px (4.8rem)",
-      "className": "d-icon--size-800"
-    }
-  ]
-}
+]

apps/dialtone-documentation/docs/_data/icons-sizes.json

@@ -30,7 +30,7 @@ figma_url: https://www.figma.com/file/zz40wi0uW9MvaJ5RuhcRZR/DT-Core%3A-Icons-7?
 ### Base Styles
 
 <code-well-header>
-    <inbox-icon></inbox-icon>
+    <dt-icon name="inbox" />
 </code-well-header>
 
 ```html
@@ -63,7 +63,7 @@ figma_url: https://www.figma.com/file/zz40wi0uW9MvaJ5RuhcRZR/DT-Core%3A-Icons-7?
     <tr v-for="{size, width_height, className } in sizes">
       <th scope="row">{{ size }}</th>
       <td class="d-ta-center">
-        <inbox-icon :class="className" />
+        <dt-icon name="inbox" :size="size" />
       </td>
       <td class="d-ff-mono d-fs-100">{{ width_height }}</td>
       <td class="d-ff-mono d-fs-100">.{{ className }}</td>
@@ -73,5 +73,5 @@ figma_url: https://www.figma.com/file/zz40wi0uW9MvaJ5RuhcRZR/DT-Core%3A-Icons-7?
 
 <script setup>
     import IconCatalog from "@views/IconCatalog.vue";
-    import { v7 as sizes } from '@data/icons-sizes.json';
+    import sizes from '@data/icons-sizes.json';
 </script>

apps/dialtone-documentation/docs/components/icon.md

@@ -59,7 +59,7 @@
   "devDependencies": {
     "@dialpad/dialtone-combinator": "^0.3.1",
     "@dialpad/dialtone-tokens": "workspace:^",
-    "@dialpad/dialtone-vue": "^3.94.0",
+    "@dialpad/dialtone-vue": "^3.94.2",
     "@dialpad/postcss-responsive-variations": "^1.1.5",
     "@docsearch/js": "^3.5.1",
     "@toycode/markdown-it-class": "^1.2.4",

apps/dialtone-documentation/package.json

@@ -23,8 +23,7 @@
   },
   "resolutions": {
     "@dialpad/dialtone>postcss-preset-env": "^7.0.0",
-    "@dialpad/dialtone>stylelint": "^15.10.1",
-    "@dialpad/dialtone-documentation>@dialpad/dialtone-icons": "^3.4.0"
+    "@dialpad/dialtone>stylelint": "^15.10.1"
   },
   "repository": "git@github.com:dialpad/dialtone.git"
 }