xicon-cli v1.0.1

xicon-cli

A command-line interface for managing icons. 管理图标组件的命令行工具。 可同时拉取 iconfont/figma 图标到本地，生成组件。

注：1.x 版本改为 esm 的方式，后续功能变更也将仅在 1.x 以上的版本实现，请尽快进行版本的升级。 1.x 新增功能点：

• 新增图标类型 multiple 多色图标，通过 css 变量实现多色图标配置及变色
• 新增输出格式 min
• 新增两种输入类型，svg 目录、json 文件
• 支持 figma 文档链接中的 node-id 参数，可配置只读取一个页面内的图标数据
• 默认模板加入可访问性相关的参数：role / aria-label / focusable / aria-hidden 等

特性

• 🎊 支持固定色、单色可配置、多色可配置等图标类型
• ⚙️ 配置灵活，同一项目内可配多个不同配置，根据需求灵活使用
• 🎉 可单独拉取 iconfont 或 figma 的图标，也可两者同时拉取
• 🎯 多种输出类型可选，且可任意配置
• 🌈 可自定义组件格式化方式
• 🚀 可设置过滤函数，过滤不需要的图标
• 📚 提供前后图标数据差异对比，方便跟踪变化
• 🤖 提供图标集成组件模板、预览页模板

安装依赖

npm install -D xicon-cli
yarn add -D xicon-cli

使用

初始化配置文件

xicon init

在当前目录生成 xicon.config.ts 配置文件。具体配置详见下方配置参数说明
参考：配置文件模板 注：配置参数可传入对象或者数组。

拉取图标

# configFile: 可传入配置文件，不传则默认取当前根目录下的xicon.config.ts 配置文件
xicon build [configFile]

使用图标

• 输出的 type 为 component 时

<template>
  <div>
    <IconArrowLeft style="font-size: 50px; color: red" />
    <icon-more style="font-size: 50px; color: red" />

    <!-- format=bg|img时 -->
    <IconArrowLeft size="50px" color="#2254f4" />
  </div>
</template>

<script lang="ts">
import { IconArrowLeft, IconMore } from "@/icons";

export default {
  components: {
    IconArrowLeft,
    IconMore,
  },
};
</script>

• 输出的 type 为 symbol 时

// 入口文件main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./svg-icon/svg-icon"; // 输出的svg-icon.js文件
import SvgIcon from "./svg-icon/svg-icon.vue"; // 输出的svg-icon.vue文件

const app = createApp(App);
app.component(SvgIcon.name, SvgIcon); // 全局注册图标组件
app.mount("#app");

<template>
  <div>
    <svg-icon name="success-static" style="font-size: 50px; color: #2254f4" />
    <svg-icon name="error-fill" :style="{ fontSize: 50, color: '#2254f4' }" />
    <svg-icon name="edit" :style="{ fontSize: 50, color: '#2254f4' }" />
    <svg-icon name="add" :style="{ fontSize: 50, color: '#2254f4' }" />
  </div>
</template>

• 多色图标

<template>
  <div>
    <IconAddCircleMultiple class="demo-icon" />
  </div>
</template>

<script lang="ts">
import { IconAddCircleMultiple } from "@/icons";

export default {
  components: {
    IconAddCircleMultiple,
  },
};
</script>

<style>
.demo-icon {
  --primary-color: #2254f4;
  --abc-color: red;
  --abc2-color: green;
}

.demo-icon:hover {
  --primary-color: #000;
  --abc-color: #2254f4;
  --abc2-color: pink;
}
</style>

创建模板文件

如需要<Icon name=""/>这种集成所有图标组件的使用方式，可创建相应模板，进行自定义； 工具内同时提供了图标预览页模板。

根据模板，创建文件。执行后可选： icon 集成所有图标的 Icon 组件模板 preview 图标预览页模板 both 同时创建两种模板文件

# outputDir: 输出文件目录，不传则默认取当前根目录
xicon template [outputDir]

配置参数说明

输入配置 InputOption

支持 figma 与 iconfont 输入，同时支持本地 svg 目录或者 json 文件输入。 类型：FigmaInputOption | IconfontInputOption| SvgInputOption | JsonInputOption

通用参数

FigmaInputOption

IconfontInputOption

SvgInputOption

JsonInputOption

输出配置 OutputOption

支持多种输出类型： CommonOutputOption | JsonOutputOption | SymbolOutputOption | ComponentOutputOption

通用参数 CommonOutputOption

JsonOutputOption

SymbolOutputOption

ComponentOutputOption

format 参数说明

注：微信小程序使用bg的方式，因转化 base64 时使用到了 btoa 函数，但小程序环境下并没有该函数，故此需在全局提前注入 btoa 函数，此处提供一个 btoa 函数供参考：btoa

• 通用参数 BaseFormatOption

• VueFormatOption type=vue | min

• BgFormatOption type=bg

自定义函数的参数

通用参数 FormatFnOption

SvgFormatOption

StyleFormatOption

ComponentFormatOption

ExportStringFormatOption