{"_id":"@all-in-js/svg-icons","_rev":"2-a16a5ea7c468940e3c51835863e4ee2a","name":"@all-in-js/svg-icons","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@all-in-js/svg-icons","version":"1.0.0","main":"dist/svg-icon.common.js","license":"MIT","bin":{"bolo":"bin/pineapple-cli.js","pineapple":"bin/pineapple-cli.js"},"scripts":{"build":"rollup --config ./build/svg-icon.rollup.js"},"peerDependencies":{"vue":"^2.5.17"},"repository":{"type":"git","url":"git+https://github.com/all-in-js/pineapple.git"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"devDependencies":{"@babel/core":"^7.12.9","@babel/preset-env":"^7.12.7","@vue/babel-preset-jsx":"^1.2.4","rollup":"^2.34.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-vue":"^5.1.9","vue":"2.5.17","vue-template-compiler":"2.5.17"},"dependencies":{"@all-in-js/utils":"^1.0.0"},"gitHead":"f2aa7802b631bf3a627039b8075e0141f2e687e4","description":"> 一个基于 svg 的图标管理和组件化方案","bugs":{"url":"https://github.com/all-in-js/pineapple/issues"},"homepage":"https://github.com/all-in-js/pineapple#readme","_id":"@all-in-js/svg-icons@1.0.0","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-2CpHC4HiLj1UBxWSC9+DsnRIpxY7uhSNw8Wj9iqlXH3frx8KeyunlIkVBuf+5d+6Hlfs3Mm4QxftQOYMlLAhsQ==","shasum":"5007bf09258c3f4fc5359da0d1e6a28de016fd41","tarball":"https://registry.npmjs.org/@all-in-js/svg-icons/-/svg-icons-1.0.0.tgz","fileCount":16,"unpackedSize":58180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN0doCRA9TVsSAnZWagAAZskP/jOGQ2AMwmk9uqpaa448\nndjyk2AgMUQjGa06eM3wLdrbL+v5V3hB9JH2iJnPhQdnCQpfzxCszMZJB0KF\nVXEip5cW6e//Sq3jAsrwHPghUQ02tq9Z0WKwltW+RtrFyuckNa/IOh74NGRV\nB7GHr/1InpA0Satt6+MVI9V/rvEP5xs6r3zqLIkXrEbb4R4W12u/2/EgzUi/\nk2m/CrDjpMWuCXd61NP8hsAiwm/jyGiATtYj8DVphs93A8v6H42enElNf/hX\n0if2dN29KnbI+G66FXfB5pshKgCwwqH0L6G8LWx5cLRrNZOuBwBef39xJj/o\nJynkymMTXdwT8iY5I606RJrYCBoOXWOA9R8M3v6Smh4ZZU2sczFmQyW5VX5S\n9ApewTwzym5u17vXP8B/6fu2guEjcMSiIN/122hhJNrgaXCYTK05LecR6uPJ\nc1CjYosavBTJu5gpUUy0Ynpi/dwzj0gyKYoKeynaiIrxzd7S7bGS343jO7iU\n83dq120axHPo5IZ1T9mIuLPlageDNmUNNFPL4A0ZftdZIVF1fC9wEL7m1gmm\nKxj1vny3/isciSlRbL3YgyvZ2kZm9K6juJZznb6/4Ufb3b4yoOAnfD9NYj1w\nFxMqd9CEPcqdmikxxBT/IQB32U020Td3UkZ/2JJIFs9eq9ttP1nQQ8qvj64i\nTThs\r\n=rRNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTW/OLZnvzMmb2Zjot5rLxmVczDLHw2lJEbLKjDcOCWAiEA7cC9tbDOgsYkOjwgWPGU/xawkhgoCBdnJvTlw6+xF5o="}]},"_npmUser":{"name":"eryue","email":"915905174@qq.com"},"directories":{},"maintainers":[{"name":"eryue","email":"915905174@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icons_1.0.0_1614235495899_0.47709451933369174"},"_hasShrinkwrap":false},"1.0.1":{"name":"@all-in-js/svg-icons","version":"1.0.1","main":"dist/svg-icon.common.js","license":"MIT","bin":{"bolo":"bin/pineapple-cli.js","pineapple":"bin/pineapple-cli.js"},"scripts":{"build":"rollup --config ./build/svg-icon.rollup.js"},"peerDependencies":{"vue":"^2.5.17"},"repository":{"type":"git","url":"git+https://github.com/all-in-js/pineapple.git"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"devDependencies":{"@babel/core":"^7.12.9","@babel/preset-env":"^7.12.7","@vue/babel-preset-jsx":"^1.2.4","rollup":"^2.34.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-vue":"^5.1.9","vue":"2.5.17","vue-template-compiler":"2.5.17"},"dependencies":{"@all-in-js/utils":"^1.0.0","svgo":"^1.0.5"},"gitHead":"f2aa7802b631bf3a627039b8075e0141f2e687e4","description":"> 一个基于 svg 的图标管理和组件化方案","bugs":{"url":"https://github.com/all-in-js/pineapple/issues"},"homepage":"https://github.com/all-in-js/pineapple#readme","_id":"@all-in-js/svg-icons@1.0.1","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-wgLgUMkpHyqwdKsST9euDumeulEU9fNDR5TK6eIxqtiCkxhDlL+lTxJNPSFQGrNHZZZzMC+KjYnRgTU2ztDNbg==","shasum":"ad162eb41c72e3e7ddb67b6325a752034602c466","tarball":"https://registry.npmjs.org/@all-in-js/svg-icons/-/svg-icons-1.0.1.tgz","fileCount":16,"unpackedSize":58203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN0nmCRA9TVsSAnZWagAA0jUP/0YZFmYFZ/sgVgF7wrcF\nRtUzfnfBUIeATUIY3LgIusZim/th4z0RkNld/MW8XU2ZVVx+EeblVSJGHmKT\nC9/YRbLAUBIKDi5f5xSE+vtiN6Jm/+ICEGY2diLObihUPsZHMyIwFqsNIFLg\nwwwCoLtap6wuDK/eU4ePsPHxCIM6CPesiHHNs45enXhaH5cFMI5tXkEqQywf\nKdtbeEKxDhvFGWaJ1H2p4vTfby3Ujt9By6FmzteDDP1CvykrivJKLl3gkOme\nVqATjZbNg3o3ZGFHa+TeKJw05BeihLUPQP2d3mbNyyFxkllQttM/AvMyDeMh\nVGKqZPR9yYAoNd9ChNBfnt5bQgF7wDLpQH1bmpBfZowvMoyum0r2aPhZ2z6V\nQTEzZ/fT4dB6LpQ9h9erYvBjHbXJIFf9OhV5Zz+ymYkni86+dScJqaLOWnxx\ndtKES1q6aQqBjsLyXuOnUIRYiCuTxstls7LaGI3Yw4meEs+IKR6Gu+VS72ce\nV8o8BSRprM6+Lti1J8/ePdzVNU41bG8ehL8EjQq7fShNqUODuUyyHSHcjpTU\nprM0XKc9FSVK04qSJRkSpG8MMg0EsDhx5FOz0ovYYhnu0VX79R5QPD8Iz9ib\nQqt5uCBoy9PUl3OcbTzfeK1s2oGGY7n7kgRloLpu+rPrKDtpOAytXrTJreQu\nnPMk\r\n=6d1n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICus0Gpc2tr1g+JtJVfJFbEVXtABf1uwD+YKTQQAPRDYAiBt7Ejly87MojVy73Am9vdf5DUQ5o6LEI7FGPWh7NglAA=="}]},"_npmUser":{"name":"eryue","email":"915905174@qq.com"},"directories":{},"maintainers":[{"name":"eryue","email":"915905174@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icons_1.0.1_1614236133798_0.9147505855782898"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-25T06:44:55.626Z","1.0.0":"2021-02-25T06:44:56.238Z","modified":"2022-04-04T13:31:22.071Z","1.0.1":"2021-02-25T06:55:33.904Z"},"maintainers":[{"name":"eryue","email":"915905174@qq.com"}],"description":"> 一个基于 svg 的图标管理和组件化方案","homepage":"https://github.com/all-in-js/pineapple#readme","repository":{"type":"git","url":"git+https://github.com/all-in-js/pineapple.git"},"bugs":{"url":"https://github.com/all-in-js/pineapple/issues"},"license":"MIT","readme":"## pineapple 菠萝\n\n> 一个基于 svg 的图标管理和组件化方案\n\n

\n\n![](./flow-chart.jpg)\n

\n\n整体工作流程分为两步：\n\n1. 管理平台，在这里可以新建一个项目，然后导入需要使用的 svg 图标，当然也能对图标进行增删改查等操作；\n2. 项目中使用，在管理平台上的项目都有一个唯一标识 alias，通过这个标识符，可以在项目中使用时只拉取该项目下的图标，避免引入项目以外的图标；为了使图标组件和图标数据集分离，并且能够保证数据有更新后，项目里能够即时同步，需要配置一个 webpack loader，将项目的 alias 传入该 loader，即可实现管理平台上图标有更新后，无需重新构建和发布组件包即可使用到最新的图标；\n\n### Install\n\n```js\nnpm i pineapple@latest\n```\n\n### 使用\n\n支持设置渐变、多色、兼容本地 svg 组件等特性，支持通过配置 webpack loader 自动同步管理平台上的图标数据集，也可以加载本地的图标数据集；\n\n* **基本用法**\n\n```js\nimport Vue from 'vue';\nimport SvgIcon from 'pineapple';\n\nVue.use(SvgIcon, {\n tagName: 'xxx-icon'\n});\n```\n\n```html\n\n```\n\n* Plugin Props\n\n| 名称 | 类型 | 默认值 | 说明 |\n| ----- | ----- | ----- | ----- |\n| svgIcons | object | - | svg数据集 |\n| tagName | string | svg-icon | 组件名 |\n| isStroke | boolean | false | 默认使用描边样式 |\n| defaultWidth | string | - | 默认宽 |\n| defaultHeight | string | - | 默认高 |\n\n* Component Props\n\n| 名称 | 类型 | 默认值 | 说明 |\n| ----- | ----- | ----- | ----- |\n| rotate | number | false | 旋转角度 |\n| spin | boolean | false | 是否添加旋转动画，实现loading效果 |\n| icon | string | - | 图标名称 |\n| name | string | - | 图标名称 |\n| width | string | - | 图标宽 |\n| height | string | - | 图标高 |\n| scale | number | - | 放大倍数 |\n| fill | boolean | true | 使用填充样式 |\n| color | string | - | 颜色 |\n| title | string | - | 标题 |\n| original | boolean | - | 是否使用图标的原色 |\n\n### 使用 webpack loader 自动同步数据集\n\n并修改 webpack 配置，参考：\n\n> 复杂粘贴即可，只需修改 projects\n```js\nrules: [\n {\n test: /\\.js$/,\n loader: 'pineapple/babel-sync-svg-icons-loader',\n options: {\n requestUri: 'http://locale.server',\n projects: 'demo'\n }\n }\n]\n```\n\n相关配置参数：\n\n| 名称 | 类型 | 默认值 | 说明 |\n| ----- | ----- | ----- | ----- |\n| requestUri | string | - | 拉取图标数据集的接口 |\n| projects | string | common | 项目 alias，多个用逗号隔开 |\n| cacheResponse | boolean | true | 是否缓存已拉取过来的图标数据集，为 true 时，当图标有更新后，需要重启应用 |\n\n### 使用 svg2js 生成的 svg 数据集\n\n支持使用包自带的 svg2js 命令将本地的 svg 文件转换成组件可用的数据集；\n\n```js\nsvg2js assets/svgs --outFile svgs.js\n```\n\n### 使用 pull-svg 拉取管理平台上的图标数据\n\n支持使用包自带的 pull-svg 命令拉取管理平台上的图标数据；\n\n```js\npull-svg --projects demo --outFile svgs.js\n```\n\n### 使用生成的数据集\n\n```js\nimport Vue from 'vue';\nimport SvgIcon from 'pineapple';\nimport SvgIcons from 'assets/js/svgs.js';\n\nVue.use(SvgIcon, {\n tagName: 'xxx-icon',\n svgIcons: SvgIcons\n});\n```\n\n### 集成并优化 svg\n\n优化 svg 信息，删除多余节点，压缩 svg 体积，并将节点信息转为 js，方便统一管理和进一步的优化工作；\n\n```js\nconst { SvgOptimize } = require('pineapple/scripts/svgo');\nconst svgo = new SvgOptimize({/* svgo options */});\n\n(async () => {\n /**\n * svgInfo: {\n * name: string;\n * data: string;\n * viewBox: string;\n * width: number;\n * height: number;\n * }\n */\n const svgInfo = await svgo.build('svg-filename', 'svg-content');\n})();\n```","readmeFilename":"README.md"}