大纲

介绍

外观是将 SVG 中键转换成外观填充的节点包 出口后 进程 :

软件中保留中风有几个原因,例如: 图片 或者说 缩写 最好是:

• 来调整苍蝇上的宽度和角线
• 列出对象后无法更改
• 联盟操作员关闭打开路径( Sketch) 或创建重输出( Figma)

该工具旨在:

• 图标创建者; 不再锁定这些曲线, 失去矢量扭矩!
• 开发者; 使用干净的 SVG 转换和操作代码中的属性

开始

要使用大纲, 您需要 节点 建立了国家预防机制.

安装后,有两种方法使用外观:

• 作为 服务,在您导出源文件夹时查看源文件夹并转换文件
• 作为 依赖性,在您使用转换函数时,提纲器会在您自己的工程中曝光

如果你想从机器上的任何地方运行外观,请安装 全球 运行为 服务。 。 。 .

作为服务运行

作为全球服务

最好的设计者单独工作

打开终端提示并在全球安装软件包 :

npm install @davestewart/outliner --global

要开始转换,请拨打 outliner 服务通过 source 和(可选) target 路径 :

node outliner <source> <target>

说明:

• 路径可以是相对的或绝对的
• 如果你省略 target、 source 文件将覆盖到原地
• 要删除 width 财务报告和审定财务报表 height 信息(故调整大小)通过 --autosize 旗帜 :

node outliner <source> <target> --autosize

作为项目服务

最佳设计者团队工作

您也可以以服务方式运行大纲 在内部 aJavaScript项目.

这样就简单了 谁都行 与项目来源合作更新资产.

这次安装外观 当地数字 :

npm install @davestewart/outliner --save-dev

然后,在您的项目中添加脚本条目 package.json,例如:

{
  "scripts": {
    "outline-icons": "node outliner <source> <target> --autosize"
  }
}

然后您可以像这样运行大纲服务 :

npm run outline-icons

大纲将启动并监视您指定的文件夹 <source> 输出到 <target>。 。 。 .

日志

一旦服务运行, 大纲将开始转换文件和日志结果 :

该服务将继续观看 source 文件夹,并自动检测、转换和登录任何进一步的导出.

一个好的终端应该使路径成为可点击的链接,从而容易打开更新后的文件.

为了参考,记录如下:

作为依赖性运行

对需要操作 SVG 的开发者来说最好

外观是您像其他软件包一样安装和使用的一种典型的依赖.

如常安装 :

npm i @davestewart/outliner --save-dev

暴露了两种功能:

• outlineFile() - 装入文件、 大纲、 返回或保存结果
• outlineSvg() - 只概述 SVG 文本

文件转换应直截了当:

// import dependencies
import { outlineFile, outlineSvg } from '@davestewart/outliner'

// convert a file and save a copy
outlineFile('./assets/src/star.svg', './assets/trg/star.svg')

// convert a file and save in place
outlineFile('./assets/src/star.svg')

// get the converted output but don't save
const output = outlineFile('./assets/src/star.svg', false)

// convert existing SVG text
const output = outlineSvg(input)

请注意,您还可以通过几个额外的参数:

• 更改大纲的处理方式
• 日志任务信息

例如:

// variables
const tasks = ['outline'] // outline but don't strip width and height
const log = {}            // object to collect logging info

// convert
outlineFile('./assets/src/star.svg', './assets/trg/star.svg', tasks, log)

// debug
console.log(log)

日志对象将被运行的每个任务所覆盖 :

{
  paths: 1,
  autosize: true,
  state: 'updated'
}

注意您也可以通过自定义函数作为 tasks数字 :

function replaceColor (svg, log) {
  log.replaceColor = true
  return svg.replace(/#000000/g, 'currentColor')
}

outlineSvg(svg, ['outline', replaceColor], log)

检查 tests/index.js 用于工作代码的文件.

API 密码

大纲文件

大纲源文件并覆盖或将结果写入新文件

签署:

outlineFile(src: string, trg?: string | false | null, tasks?: Array<string | Function>, log?: object)

参数:

• src: 源文件夹的相对或绝对路径
• trg: 目标文件夹的可选相对或绝对路径
  • 通过 undefined 用于相同的 src
  • 过 false 或者说 null 以跳过写入并返回输出
• tasks: 要运行的一系列任务, 默认为 ['outline', 'autosize']
  • 字符串任务应该是其中之一 'outline' 或者说'autosize'
  • 函数的格式 (svg: string, log: object) => {}: string
• log: 可选 {} 接收日志信息的对象

大纲 SVG

大纲 SVG 文本并返回结果

签署:

outlineSvg(svg: string, tasks?: Array<string | Function>, log?: object)

参数:

• svg: 有效的 SVG 文本
• tasks: 要运行的一系列任务, 默认为 ['outline', 'autosize']
  • 字符串任务应该是其中之一 'outline' 或者说'autosize'
  • 函数的格式 (svg: string, log: object) => {}: string
• log: 可选 {} 接收日志信息的对象

状态

常数对象比较

这个 log.state 每个文件操作将包含其中的一个值:

State.NO_FILE   = 'no file' 
State.NO_DATA   = 'no data' 
State.NO_WRITE  = 'no write' 
State.NO_CHANGE = 'no change' 
State.UPDATED   = 'updated' 
State.COPIED    = 'copied'

演示文稿

如果您复制了Repo,您就可以与演示一起玩.

以 :

npm run demo

你可以比较一下 source 财务报告和审定财务报表 target 输出在 Figma、 Sketch 或文本编辑器中.

如果您想要调整并再导出源文件, 大纲器会每次导出时都会取出任何更改并更新目标文件夹 .