{"_id":"@abulo-space/vue-next","name":"@abulo-space/vue-next","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abulo-space/vue-next","version":"1.0.0","description":"Vue3 Icons for IconSpace","main":"lib/index.js","module":"es/index.js","typings":"lib/index.d.ts","keywords":["vue","icon","icon space","IconSpace","svg","system icons","component","components","design"],"homepage":"https://github.com/abulo/IconSpace/packages/vue-next","bugs":{"url":"https://github.com/abulo/IconSpace/issues"},"repository":{"type":"git","url":"git+https://github.com/abulo/IconSpace.git"},"license":"Apache-2.0","engines":{"node":">= 8.0.0","npm":">= 5.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"sideEffects":["styles/**"],"devDependencies":{"@types/react":"^19.2.7","@vue/runtime-dom":"^3.5.25","vue":"^3.3.4"},"peerDependencies":{"vue":"^3.3.4"},"_id":"@abulo-space/vue-next@1.0.0","_integrity":"sha512-VsUsZsH6tYWg6/o6R1SjqRxLc9fbFjZnjqBcXDzCD6oclJK5y5m8JdxfTfLt0TR/9GiRTYl+1+3lXqHnCxwncA==","_resolved":"/private/var/folders/rc/ccdkglpx4x522gn7v6xs59l80000gn/T/a89219b8c1b378ca5a1e6739c013bdd0/abulo-space-vue-next-1.0.0.tgz","_from":"file:abulo-space-vue-next-1.0.0.tgz","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-VsUsZsH6tYWg6/o6R1SjqRxLc9fbFjZnjqBcXDzCD6oclJK5y5m8JdxfTfLt0TR/9GiRTYl+1+3lXqHnCxwncA==","shasum":"6e4b9881219ebcbfcebbe8262b32c42a61505cc7","tarball":"https://registry.npmjs.org/@abulo-space/vue-next/-/vue-next-1.0.0.tgz","fileCount":10767,"unpackedSize":10590724,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGHkvpyftpuFemZlPt3GivxaSbLDLLg/j0yy4JQqMoquAiEA6pEy3mrVByG1r7tupt7PSRcLmaOifVDVRFKlN+UCNhA="}]},"_npmUser":{"name":"abulo","email":"abulo.hoo@gmail.com"},"directories":{},"maintainers":[{"name":"abulo","email":"abulo.hoo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-next_1.0.0_1765436901487_0.007375123064387479"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-11T07:08:21.396Z","1.0.0":"2025-12-11T07:08:21.855Z","modified":"2025-12-11T07:08:22.140Z"},"maintainers":[{"name":"abulo","email":"abulo.hoo@gmail.com"}],"description":"Vue3 Icons for IconSpace","homepage":"https://github.com/abulo/IconSpace/packages/vue-next","keywords":["vue","icon","icon space","IconSpace","svg","system icons","component","components","design"],"repository":{"type":"git","url":"git+https://github.com/abulo/IconSpace.git"},"bugs":{"url":"https://github.com/abulo/IconSpace/issues"},"license":"Apache-2.0","readme":"# IconSpace Icons\n\n> Vue3 Icons for IconSpace\n\n## 介绍\n\n### 新特性\n\n-   提供超过 2000 图标\n-   支持 4 种主题:\n    -   线性\n    -   填充\n    -   双色\n    -   四色\n\n### 更多图标\n\n请访问[IconSpace](https://icon-space.github.io/doc/), 提供更多便捷的操作：\n\n-   复制 SVG 源文件\n-   复制 React 图标组件\n-   复制 Vue 图标组件\n-   下载 PNG\n-   下载 SVG\n\n## 快速上手\n\n### 安装\n\n```\nnpm install @abulo-space/vue-next --save\n```\n\n### 引用图标\n\n在组件的上方引用`@abulo-space/vue-next`，并在组件的模板函数中使用:\n\n```vue\n<template>\n    <home theme=\"filled\" />\n</template>\n<script>\nimport { Home } from '@abulo-space/vue-next'\n\nexport default {\n    components: {\n        Home\n    }\n}\n</script>\n```\n\n如果你不想引用，那么你可以全局安装图标\n\n```typescript\nimport { install } from '@abulo-space/vue-next/es/all'\nimport { createApp } from 'vue'\n\nconst app = createApp({})\n\n// Install\ninstall(app) // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.\ninstall(app, 'i') // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.\napp.mount('#app')\n```\n\n### Style Sheet\n\n引用预设样式\n\n```typescript\nimport '@abulo-space/vue-next/styles/index.css'\n```\n\n### 全局\n\n你可以使用 `@abulo-space/vue-next/es/runtime` 中的 `IconProvider`来设置全局配置。\n\n```html\n<template>\n    <div>\n        <home />\n    </div>\n</template>\n<script lang=\"ts\">\n    import { DEFAULT_ICON_CONFIGS, IconProvider } from '@abulo-space/vue-next/es/runtime'\n    import { Home } from '@abulo-space/vue-next'\n\n    export default {\n        name: 'App',\n        setup() {\n            IconProvider({ ...DEFAULT_ICON_CONFIGS, prefix: 'icon' })\n        },\n        components: {\n            Home\n        }\n    }\n</script>\n```\n\n### 按需加载\n\n可以使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)来按需加载图标\n\n配置如下:\n\n```json\n{\n    \"plugins\": [\n        [\n            \"import\",\n            {\n                \"libraryName\": \"@abulo-space/vue-next\",\n                \"libraryDirectory\": \"es/icons\",\n                \"camel2DashComponentName\": false\n            }\n        ]\n    ]\n}\n```\n\n### 使用 Icon 组件\n\n我们更推荐使用按需加载的方式来加载图标，因为这样可以大幅度缩减编译后代码体积，\n但是在有些类似远程加载的菜单的场景下，直接引用全部图标可以缩减开发成本。\n\n使用方式：\n\n```vue\n<template>\n    <icon-space type=\"AddText\" theme=\"filled\" />\n    <icon-space type=\"add-text\" theme=\"filled\" />\n</template>\n<script>\nimport { IconSpace } from '@abulo-space/vue-next/es/all'\n\nexport default {\n    components: {\n        IconSpace\n    }\n}\n</script>\n```\n\n### 将 IconSpace 嵌入到你的项目中\n\n如果你的项目中需要使用到图标名称，作者，分类，标签以及创建时间等额外的信息，你可以使用位于每个 NPM 根目录的`icons.json`文件。\n\n## 属性\n\n| 属性名称       | 介绍                                        | 类型                                                             | 默认值         | 注释 |\n| -------------- | ------------------------------------------- | ---------------------------------------------------------------- | -------------- | ---- |\n| theme          | 图标主题                                    | 'outline' &#124; 'filled' &#124; 'two-tone' &#124; 'multi-color' | 'outline'      |      |\n| size           | 图标的大小，宽高相同                        | number &#124; string                                             | '1em'          |      |\n| spin           | 给图标加旋转效果                            | boolean                                                          | false          |      |\n| fill           | 图标的颜色，不超过 4 个颜色，默认为当前颜色 | string &#124; string[]                                           | 'currentColor' |      |\n| strokeLinecap  | svg 元素的 stroke-linecap 属性              | 'butt' &#124; 'round' &#124; 'square'                            | 'round'        |      |\n| strokeLinejoin | svg 元素的 stroke-linejoin 属性             | 'miter' &#124; 'round' &#124; 'bevel'                            | 'round'        |      |\n| strokeWidth    | svg 元素的 stroke-width 属性                | number                                                           | 4              |      |\n| tag            | 包裹 svg 的标签                             | string                                                           | span           |      |\n","readmeFilename":"README.zh.md","_rev":"1-346aa4999ec20d17bce58a70481b7066"}