{"id":1930,"date":"2023-10-27T09:37:09","date_gmt":"2023-10-27T01:37:09","guid":{"rendered":"https:\/\/usei.cn\/?p=1930"},"modified":"2023-10-27T09:37:10","modified_gmt":"2023-10-27T01:37:10","slug":"vue3-vite-svg-icon","status":"publish","type":"post","link":"https:\/\/usei.cn\/index.php\/2023\/10\/27\/vue3-vite-svg-icon\/","title":{"rendered":"Vue3 Vite Svg Icon"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u5b89\u88c5\u63d2\u4ef6<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i vite-plugin-svg-icons -D<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/github.com\/vbenjs\/vite-plugin-svg-icons\/blob\/main\/README.zh_CN.md\">https:\/\/github.com\/vbenjs\/vite-plugin-svg-icons\/blob\/main\/README.zh_CN.md<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u914d\u7f6e<\/h2>\n\n\n\n<p>vite.config.ts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'\r\nimport path from 'path'\r\n\r\nexport default () => {\r\n  return {\r\n    plugins: &#91;\r\n      createSvgIconsPlugin({\r\n        \/\/ \u6307\u5b9a\u9700\u8981\u7f13\u5b58\u7684\u56fe\u6807\u6587\u4ef6\u5939\r\n        iconDirs: &#91;path.resolve(process.cwd(), 'src\/icons')],\r\n        \/\/ \u6307\u5b9asymbolId\u683c\u5f0f\r\n        symbolId: 'icon-&#91;dir]-&#91;name]',\r\n\r\n        \/**\r\n         * \u81ea\u5b9a\u4e49\u63d2\u5165\u4f4d\u7f6e\r\n         * @default: body-last\r\n         *\/\r\n        inject?: 'body-last' | 'body-first'\r\n\r\n        \/**\r\n         * custom dom id\r\n         * @default: __svg__icons__dom__\r\n         *\/\r\n        customDomId: '__svg__icons__dom__',\r\n      }),\r\n    ],\r\n  }\r\n}<\/code><\/pre>\n\n\n\n<p>\u5728 src\/main.ts \u5185\u5f15\u5165\u6ce8\u518c\u811a\u672c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'virtual:svg-icons-register'<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u7f16\u5199\u7ec4\u4ef6<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n  &lt;svg aria-hidden=\"true\">\n    &lt;use :xlink:href=\"symbolId\" \/>\n  &lt;\/svg>\n&lt;\/template>\n\n&lt;script>\n  import { defineComponent, computed } from 'vue';\n\n  export default defineComponent({\n    name: 'SvgIcon',\n    props: {\n      prefix: {\n        type: String,\n        default: 'icon',\n      },\n      name: {\n        type: String,\n        required: true,\n      },\n    },\n    setup(props) {\n      const symbolId = computed(() => `#${props.prefix}-${props.name}`);\n      return { symbolId };\n    },\n  });\n&lt;\/script>\r<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528<\/h2>\n\n\n\n<p><strong>icons \u76ee\u5f55\u7ed3\u6784<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># src\/icons\r\n- icon1.svg # icon-icon1\r\n- icon2.svg # icon-icon2\r\n- icon3.svg # icon-icon3\r\n- dir\/icon1.svg # icon-dir-icon1\r\n- dir\/dir2\/icon1.svg # icon-dir-dir2-icon1<\/code><\/pre>\n\n\n\n<p>&lt;SvgIcon name=&#8221;worker_fill&#8221; class=&#8221;icon-svg&#8221; \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5\u63d2\u4ef6 https:\/\/github.com\/vbenjs\/vite-plugin-svg-icons\/bl [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8],"tags":[],"class_list":["post-1930","post","type-post","status-publish","format-standard","hentry","category-vue","category-frontend"],"_links":{"self":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":4,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"predecessor-version":[{"id":1934,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1930\/revisions\/1934"}],"wp:attachment":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}