pineapple 菠萝

一个基于 svg 的图标管理和组件化方案

整体工作流程分为两步：

1. 管理平台，在这里可以新建一个项目，然后导入需要使用的 svg 图标，当然也能对图标进行增删改查等操作；
2. 项目中使用，在管理平台上的项目都有一个唯一标识 alias，通过这个标识符，可以在项目中使用时只拉取该项目下的图标，避免引入项目以外的图标；为了使图标组件和图标数据集分离，并且能够保证数据有更新后，项目里能够即时同步，需要配置一个 webpack loader，将项目的 alias 传入该 loader，即可实现管理平台上图标有更新后，无需重新构建和发布组件包即可使用到最新的图标；

Install

npm i pineapple@latest

使用

支持设置渐变、多色、兼容本地 svg 组件等特性，支持通过配置 webpack loader 自动同步管理平台上的图标数据集，也可以加载本地的图标数据集；

• 基本用法

import Vue from 'vue';
import SvgIcon from 'pineapple';

Vue.use(SvgIcon, {
  tagName: 'xxx-icon'
});

<template>
  <xxx-icon
    name="icon"
    color="red green">
  </xxx-icon>
</template>

• Plugin Props

| 名称 | 类型 | 默认值 | 说明 | | ----- | ----- | ----- | ----- | | svgIcons | object | - | svg数据集 | | tagName | string | svg-icon | 组件名 | | isStroke | boolean | false | 默认使用描边样式 | | defaultWidth | string | - | 默认宽 | | defaultHeight | string | - | 默认高 |

• Component Props

| 名称 | 类型 | 默认值 | 说明 | | ----- | ----- | ----- | ----- | | rotate | number | false | 旋转角度 | | spin | boolean | false | 是否添加旋转动画，实现loading效果 | | icon | string | - | 图标名称 | | name | string | - | 图标名称 | | width | string | - | 图标宽 | | height | string | - | 图标高 | | scale | number | - | 放大倍数 | | fill | boolean | true | 使用填充样式 | | color | string | - | 颜色 | | title | string | - | 标题 | | original | boolean | - | 是否使用图标的原色 |

使用 webpack loader 自动同步数据集

并修改 webpack 配置，参考：

复杂粘贴即可，只需修改 projects

rules: [
  {
    test: /\.js$/,
    loader: 'pineapple/babel-sync-svg-icons-loader',
    options: {
      requestUri: 'http://locale.server',
      projects: 'demo'
    }
  }
]

相关配置参数：

| 名称 | 类型 | 默认值 | 说明 | | ----- | ----- | ----- | ----- | | requestUri | string | - | 拉取图标数据集的接口 | | projects | string | common | 项目 alias，多个用逗号隔开 | | cacheResponse | boolean | true | 是否缓存已拉取过来的图标数据集，为 true 时，当图标有更新后，需要重启应用 |

使用 svg2js 生成的 svg 数据集

支持使用包自带的 svg2js 命令将本地的 svg 文件转换成组件可用的数据集；

svg2js assets/svgs --outFile svgs.js

使用 pull-svg 拉取管理平台上的图标数据

支持使用包自带的 pull-svg 命令拉取管理平台上的图标数据；

pull-svg --projects demo --outFile svgs.js

使用生成的数据集

import Vue from 'vue';
import SvgIcon from 'pineapple';
import SvgIcons from 'assets/js/svgs.js';

Vue.use(SvgIcon, {
  tagName: 'xxx-icon',
  svgIcons: SvgIcons
});

集成并优化 svg

优化 svg 信息，删除多余节点，压缩 svg 体积，并将节点信息转为 js，方便统一管理和进一步的优化工作；

const { SvgOptimize } = require('pineapple/scripts/svgo');
const svgo = new SvgOptimize({/* svgo options */});

(async () => {
  /**
   * svgInfo: {
   *  name: string;
   *  data: string;
   *  viewBox: string;
   *  width: number;
   *  height: number;
   * }
   */
  const svgInfo = await svgo.build('svg-filename', 'svg-content');
})();