使用全局引入, 添加使用说明文档

src/App.vue

@@ -2,18 +2,21 @@
   <div id="app">
     <HeadItem />
     <IconsItem />
+    <InstallItem />
   </div>
 </template>
 
 <script>
 import HeadItem from "./components/HeadItem.vue";
 import IconsItem from "./components/IconsItem.vue";
+import InstallItem from "./components/InstallItem.vue";
 
 export default {
   name: "App",
   components: {
     HeadItem,
     IconsItem,
+    InstallItem,
   },
 };
 </script>

src/components/IconsItem.vue

@@ -1,7 +1,5 @@
 <script>
 import Vue from "vue";
-import "~/styles/icon.css";
-import * as Icons from "@/map.js"; // 引入所有图标组件
 import iconsData from "~/icons.json"; // 导入 JSON 数据
 import IconSearch from "./icon/IconSearch.vue";
 import IconArrowDown from "./icon/IconArrowDown.vue";
@@ -19,11 +17,10 @@ export default {
   },
   data() {
     return {
-      Icons,
       showCopiedMessage: false,
       opacityValue: 0,
       isThrottled: false,
-      iconNames: Object.keys(Icons),
+      iconNames: iconsData.map(icon => icon.componentName),
       sortBy: "date",
       showColorIcons: false,
       showAnimationIcons: false,
@@ -279,7 +276,7 @@ export default {
           :title="iconComponentName"
           @click="copyName(iconComponentName)"
         >
-          <component :is="Icons[iconComponentName]" />
+          <component :is="iconComponentName" />
           <div
             class="text-xs antialiased text-center truncate text-slate-500 text-wrap w-full h-4 group-hover:overflow-visible group-hover:break-words select-none"
           >

src/components/InstallItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-10">
+    <div class="text-3xl font-medium my-4">用法</div>
+    <div class="docx-grid-block">
+      <div>
+        <div class="text-base font-medium my-2">安装</div>
+        <div class="code-block">
+          <div class="code-line">
+            <code>npm install ksw-rpom-icon-vue</code>
+          </div>
+          <div class="code-line">
+            <span class="code-comment">or</span>
+          </div>
+          <div class="code-line">
+            <code>yarn add ksw-rpom-icon-vue</code>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="text-base font-medium my-2">引用</div>
+        <div class="code-block">
+          <div class="code-line">
+            <span class="code-comment">// 引入样式 （整个项目只需1次）</span>
+          </div>
+          <div class="code-line">
+            <code>import 'ksw-rpom-icon-vue/styles/icon.css';</code>
+          </div>
+          <div class="code-line">
+            <span class="code-comment">// 引用</span>
+          </div>
+          <div class="code-line">
+            <code>import { IconName } from 'ksw-rpom-icon-vue'</code>
+          </div>
+          <div class="code-line">
+            <span class="code-comment">// 全局引用</span>
+          </div>
+          <div class="code-line">
+            <code>import { KrpomIcon } from 'ksw-rpom-icon-vue'</code>
+          </div>
+          <div class="code-line">
+            <code>Vue.use(KrpomIcon)</code>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="text-base font-medium my-2">使用</div>
+        <div class="code-block">
+          <div class="code-line">
+            <code>&lt;IconName :size="24" color="#333" /&gt;</code>
+          </div>
+          <div class="code-line">
+            <span class="code-comment">// 设置 spin 为 true 使图标旋转</span>
+          </div>
+          <div class="code-line">
+            <code
+              >&lt;IconLoading :size="24" color="#333" :spin="true" /&gt;</code
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="css">
+.docx-grid-block {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  gap: 1rem;
+}
+.docx-grid-block div {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+pre {
+  width: 100%;
+  padding: 20px;
+  border-radius: 6px;
+  color: #476391;
+  background-color: #e7ecf3;
+  overflow: auto;
+}
+.code-comment {
+  color: #a0a1a7;
+}
+.code-line {
+  margin: 8px 12px;
+}
+.code-block {
+  background-color: rgb(242, 243, 245);
+  line-height: 1.5;
+  border-width: 1px;
+  border-color: #dee0e3;
+  border-style: solid;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  padding: 4px;
+}
+h3 {
+  width: 100%;
+  max-width: 360px;
+  margin: 0 16px;
+  padding: 10px 0;
+}
+</style>

src/main.js

@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
-// import { KrpomIcon } from "./index.js";
+import { KrpomIcon } from "./index.js";
 import "~/styles/icon.css";
 import "~/tailwindcss.css";
 
 Vue.config.productionTip = false
 
-// Vue.use(KrpomIcon);
+Vue.use(KrpomIcon);
 
 new Vue({
   render: h => h(App),