[{"data":1,"prerenderedAt":145},["ShallowReactive",2],{"content:\u002Fposts\u002F2023\u002Fvue3-auto-import-icon":3,"surround:\u002Fposts\u002F2023\u002Fvue3-auto-import-icon":133},{"id":4,"title":5,"body":6,"canonical":111,"categories":112,"date":114,"description":115,"draft":116,"extension":117,"image":118,"meta":119,"navigation":120,"path":121,"permalink":111,"readingTime":122,"recommend":111,"references":111,"seo":127,"sitemap":128,"stem":129,"tags":130,"type":111,"updated":114,"__hash__":132},"content\u002Fposts\u002F2023\u002Fvue3-auto-import-icon.md","vue3自动引入图标",{"type":7,"value":8,"toc":104},"minimark",[9,13,24,28,36,47,86,89,96],[10,11,12],"h2",{"id":12},"依赖安装",[14,15,21],"pre",{"className":16,"code":18,"language":19,"meta":20},[17],"language-bash","pnpm i -D unplugin-icons vite-plugin-svg-icons @vitejs\u002Fplugin-vue\n","bash","",[22,23,18],"code",{"__ignoreMap":20},[10,25,27],{"id":26},"配置-viteconfigts-文件","配置 vite.config.ts 文件",[14,29,34],{"className":30,"code":32,"language":33,"meta":20},[31],"language-ts","import vue from \"@vitejs\u002Fplugin-vue\";\nimport path, { resolve } from \"node:path\";\nimport { FileSystemIconLoader } from \"unplugin-icons\u002Floaders\";\nimport IconsResolver from \"unplugin-icons\u002Fresolver\";\nimport Icons from \"unplugin-icons\u002Fvite\";\nimport { NaiveUiResolver } from \"unplugin-vue-components\u002Fresolvers\";\nimport Components from \"unplugin-vue-components\u002Fvite\";\nimport { defineConfig } from \"vite\";\nimport { createSvgIconsPlugin } from \"vite-plugin-svg-icons\";\n\n\u002F\u002F svg存放地址\nconst customIconPath = resolve(process.cwd(), \"src\u002Fassets\u002Fsvg\");\n\nexport default defineConfig({\n    plugins: [\n        vue(),\n        Components({\n        \u002F\u002F auto import components 自动加载组件\n            resolvers: [\n                NaiveUiResolver(),\n                IconsResolver({\n                    customCollections: [\"custom\"],\n                    componentPrefix: \"icon\",\n                }),\n            ],\n            dts: false,\n        }),\n        Icons({\n            compiler: \"vue3\",\n            customCollections: {\n                custom: FileSystemIconLoader(customIconPath),\n            },\n            scale: 1,\n            defaultClass: \"inline-block\",\n        }),\n        createSvgIconsPlugin({\n            iconDirs: [customIconPath],\n            symbolId: \"icon-custom-[dir]-[name]\",\n            inject: \"body-last\",\n            customDomId: \"__CUSTOM_SVG_ICON__\",\n        }),\n    ],\n});\n","ts",[22,35,32],{"__ignoreMap":20},[37,38,39],"alert",{},[40,41,42,43,46],"p",{},"在这里我们为什么要使用 ",[22,44,45],{"code":45},"process.cwd()","呢？",[37,48,49,57,65,68,76],{},[50,51,52],"template",{"v-slot:title":20},[40,53,54],{},[22,55,56],{"code":56},"__dirname和process.cwd()的区别",[14,58,63],{"className":59,"code":61,"language":62,"meta":20},[60],"language-js","const { resolve } = require(\"node:path\")\n\nconst dirnamePath = resolve(__dirname, \"\")\nconsole.log(dirnamePath)\nconst pwdPath = resolve(process.cwd())\nconsole.log(pwdPath)\n","js",[22,64,61],{"__ignoreMap":20},[40,66,67],{},"输出结果是：",[14,69,74],{"className":70,"code":72,"language":73,"meta":20},[71],"language-txt","\u002FUsers\u002Fwangmou\u002Fworkspace\u002Fwhbbit-blog\u002Fwxw-blog\u002Fscripts\n\u002FUsers\u002Fwangmou\u002Fworkspace\u002Fwhbbit-blog\u002Fwxw-blog\n","txt",[22,75,72],{"__ignoreMap":20},[40,77,78,79,82,83,85],{},"我们可以看到，",[22,80,81],{"code":81},"__dirname"," 是命令执行目录，",[22,84,45],{"code":45}," 是执行命令的 js 所的在目录",[10,87,88],{"id":88},"使用",[40,90,91,92,95],{},"假设 assets\u002Fsvg 文件夹中包含 logo.svg 和 menu.svg 两个 svg 图标。我们可以直接使用 ",[22,93,94],{"code":94},"icon-custom-文件名"," 来使用",[14,97,102],{"className":98,"code":100,"language":101,"meta":20},[99],"language-html","\u003Ctemplate>\n  \u003Cicon-custom-logo \u002F>\n  \u003Cicon-custom-menu \u002F>\n\u003C\u002Ftemplate>\n","html",[22,103,100],{"__ignoreMap":20},{"title":20,"searchDepth":105,"depth":105,"links":106},4,[107,109,110],{"id":12,"depth":108,"text":12},2,{"id":26,"depth":108,"text":27},{"id":88,"depth":108,"text":88},null,[113],"代码","2023-02-05 12:27:31","使用插件自动引入 svg 图标",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fvue3-auto-import-icon.jpg",{},true,"\u002Fposts\u002F2023\u002Fvue3-auto-import-icon",{"text":123,"minutes":124,"time":125,"words":126},"2 min read",1.125,67500,225,{"title":5,"description":115},{"loc":121},"posts\u002F2023\u002Fvue3-auto-import-icon",[131],"vite使用","u-PwLdCCR21fZM_dhRPX2Tgo61yxiRYkLg9TDuUJgGY",[134,139],{"title":135,"path":136,"stem":137,"date":138,"type":111,"children":-1},"stellar主题添加代码块复制功能","\u002Fposts\u002F2023\u002Fstellar-theme-code-copy","posts\u002F2023\u002Fstellar-theme-code-copy","2023-01-31 13:07:10",{"title":140,"path":141,"stem":142,"date":143,"type":144,"children":-1},"驾照考试记录","\u002Fposts\u002F2023\u002Fdriving-test-record","posts\u002F2023\u002FDriving-test-record","2023-02-08 22:46:24","story",1789642594805]