{"_id":"@bingling00/vue-icons","name":"@bingling00/vue-icons","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bingling00/vue-icons","version":"1.0.0","description":"Vue Icons for IconPark","main":"lib/index.js","module":"es/index.js","typings":"lib/index.d.ts","keywords":["vue","icon"],"repository":{"type":"git","url":"git+https://github.com/bingling0084/icons-docs.git"},"license":"Apache-2.0","engines":{"node":">= 8.0.0","npm":">= 5.0.0"},"peerDependencies":{"vue":"2.x"},"dependencies":{"@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","csstype":"^3.0.3"},"publishConfig":{"access":"public"},"sideEffects":["styles/**"],"gitHead":"44ce69ce9a73a381bbc0503bea7d615f0a234ec2","_id":"@bingling00/vue-icons@1.0.0","bugs":{"url":"https://github.com/bingling0084/icons-docs/issues"},"homepage":"https://github.com/bingling0084/icons-docs#readme","_nodeVersion":"22.6.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-9jRFvzj1I933nIuAZglTRPKPaMEteIkmVyxK7QvTMoyMhVfAX9zpbMwMXjCHPBjAGKfJ1OmVInfpLqWhAuw0/w==","shasum":"aa367f95eec00ff2b524f2d7558be5bff1b23e96","tarball":"https://registry.npmjs.org/@bingling00/vue-icons/-/vue-icons-1.0.0.tgz","fileCount":10659,"unpackedSize":11579434,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDy4YjtWHA7nfn/JjeKa14upMytdvb8z4mbIczVhjInSAiEApJchUHTbOsuRiOObiUTwtZ49iVaOBgRClw1BFuAVvfA="}]},"_npmUser":{"name":"bingling00","email":"1412567366@qq.com"},"directories":{},"maintainers":[{"name":"bingling00","email":"1412567366@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-icons_1.0.0_1731404569722_0.9156328036133059"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-12T09:42:49.600Z","1.0.0":"2024-11-12T09:42:50.095Z","modified":"2024-11-12T09:42:50.403Z"},"maintainers":[{"name":"bingling00","email":"1412567366@qq.com"}],"description":"Vue Icons for IconPark","homepage":"https://github.com/bingling0084/icons-docs#readme","keywords":["vue","icon"],"repository":{"type":"git","url":"git+https://github.com/bingling0084/icons-docs.git"},"bugs":{"url":"https://github.com/bingling0084/icons-docs/issues"},"license":"Apache-2.0","readme":"# IconPark 图标\r\n> IconPark图标体系\r\n\r\n## 介绍\r\n\r\n### 新特性\r\n* 提供超过2000图标\r\n* 支持4种主题:\r\n    * 线性\r\n    * 填充\r\n    * 双色\r\n    * 四色\r\n\r\n### 更多图标\r\n请访问[IconPark图标网站](http://iconpark.bytedance.com), 提供更多便捷的操作：\r\n* 复制SVG源文件\r\n* 复制React图标组件\r\n* 复制Vue图标组件\r\n* 下载PNG\r\n* 下载SVG\r\n## 快速上手\r\n### 安装\r\n\r\n```\r\nnpm install @icon-park/vue --save\r\n```\r\n\r\n### 引用图标\r\n在组件的上方引用`@icon-park/vue`，并在组件的模板函数中使用:\r\n\r\n``` vue\r\n<template>\r\n<home theme=\"filled\"/>\r\n</template>\r\n<script>\r\nimport {Home} from '@icon-park/vue';\r\n\r\nexport default {\r\n    components: {\r\n        Home\r\n    }\r\n}\r\n</script>\r\n```\r\n\r\n如果你不想引用，那么你可以全局安装图标\r\n\r\n\r\n```typescript\r\nimport {install} from '@icon-park/vue/es/all';\r\nimport Vue from 'vue';\r\n\r\n// Install\r\ninstall(Vue); // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.\r\ninstall(Vue, 'i'); // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.\r\n```\r\n\r\n\r\n### Style Sheet\r\n\r\n引用预设样式\r\n\r\n```typescript\r\nimport '@icon-park/vue/styles/index.css';\r\n```\r\n\r\n### 全局\r\n你可以使用Vue提供的`provide`属性来设置全局配置。\r\n\r\n```html\r\n<template>\r\n<div>\r\n<home/>\r\n</div>\r\n</template>\r\n<script lang=\"ts\">\r\nimport {DEFAULT_ICON_CONFIGS} from '@icon-park/vue'\r\nimport {Home} from '@icon-park/vue';\r\n\r\nconst IconConfig = {...DEFAULT_ICON_CONFIGS, prefix: 'icon'}\r\n\r\nexport default {\r\n    name: 'App',\r\n    provide () {\r\n        return {\r\n            ICON_CONFIGS: IconConfig\r\n        }\r\n    },\r\n    components: {\r\n        Home\r\n    }\r\n};\r\n</script>\r\n\r\n```\r\n\r\n### 按需加载\r\n\r\n可以使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)来按需加载图标\r\n\r\n配置如下:\r\n```json\r\n{\r\n    \"plugins\": [\r\n        [\r\n            \"import\",\r\n            {\r\n                \"libraryName\": \"@icon-park/vue\",\r\n                \"libraryDirectory\": \"es/icons\",\r\n                \"camel2DashComponentName\": false \r\n            }\r\n        ]\r\n    ]\r\n}\r\n```\r\n\r\n\r\n### 使用Icon组件\r\n我们更推荐使用按需加载的方式来加载图标，因为这样可以大幅度缩减编译后代码体积，\r\n但是在有些类似远程加载的菜单的场景下，直接引用全部图标可以缩减开发成本。\r\n\r\n使用方式：\r\n\r\n``` vue\r\n<template>\r\n<icon-park type=\"AddText\" theme=\"filled\"/>\r\n<icon-park type=\"add-text\" theme=\"filled\"/>\r\n</template>\r\n<script>\r\nimport {IconPark} from '@icon-park/vue/es/all';\r\n\r\nexport default {\r\n    components: {\r\n        IconPark\r\n    }\r\n}\r\n</script>\r\n```\r\n### 将IconPark嵌入到你的项目中\r\n如果你的项目中需要使用到图标名称，作者，分类，标签以及创建时间等额外的信息，你可以使用位于每个NPM根目录的`icons.json`文件。\r\n\r\n## 属性\r\n|    属性名称\t | 介绍  | 类型  | 默认值 | 注释 |\r\n| ---------- | --- | --- | --- | --- |\r\n| theme |  图标主题 | 'outline' &#124; 'filled' &#124; 'two-tone' &#124; 'multi-color' | 'outline'  |\r\n| size | 图标的大小，宽高相同 | number &#124; string |  '1em' |\r\n| spin |  给图标加旋转效果 | boolean | false |\r\n| fill |  图标的颜色，不超过4个颜色，默认为当前颜色 | string &#124; string[]|  'currentColor' |\r\n| strokeLinecap |  svg元素的stroke-linecap属性 | 'butt' &#124; 'round' &#124; 'square' |  'round' |\r\n| strokeLinejoin |  svg元素的stroke-linejoin属性 | 'miter' &#124; 'round' &#124; 'bevel' |  'round' |\r\n| strokeWidth |  svg元素的stroke-width属性 | number |  4 |\r\n","readmeFilename":"README.zh-CN.md"}