将iconfont平台的icon库智能化转为sketch symbol库

iconfont平台为icon的制作与使用提供了很好的平台。

但在设计中，往往使用symbol图标更有优势：

全局修改方便；
可以减少图层；
方便使用：可以把每个图标导出后，做成有导出标记的symbol图标，任意使用；
标注软件导出设计稿，开发可以直观的获取图标的名称，不用每次都手动导出图标。

所以，通过将iconfont 的项目图标库转化为sketch symbol库使用，对设计者有很大的好处。

建议：建立独立的项目icon 图标库，便于更新与维护。

一、iconfont平台图标库的建立

图标库从设计到应用

二、将iconfont 的项目图标库转化为sketch symbol库 插件

1、设计

1.1、icon项目名称
非必填

1.2、粘贴iconfont.js
1）、建立icon项目
2）、icon项目->下载至本地
3）、解压download.zip，打开iconfont.js，全部复制iconfont.js
4）、粘贴到框中

1.3、是否导出图标
默认导出图标，名称为图标的名称；
做成有导出标记的symbol图标，任意使用；标注软件导出设计稿，开发可以直观的获取图标的名称，不用每次都手动导出图标。

1.4、生成symbol大小为16*16像素，便于使用

1.5、增量式新增图标，不会影响以前的图标使用
删除需要手动删除。

2、设计实现（主要点）

2.1、解析iconfont.js
iconfont.js里有图标库的svg资源，第一步是解析svg：

var myString = this.state.symbolString;
var startIndex=myString.indexOf('<svg>');
var endIndex=myString.indexOf('</svg>');
var symbolString = myString.substring(startIndex+5,endIndex);
var symbols = symbolString.split("<symbol");
var symbolIcons = symbols.slice(1);
this.state.symbolIcons = symbolIcons;

2.2、将icon插入画板，并转化为symbol
解析完svg资源，需要将symbolIcons传递给sketch做进一步处理：

1）、格式化图标svg：

for(var i=0;i<symbolIcons.length;i++){
  var symbolstring = symbolIcons[i];
  var flagIndex = symbolstring.indexOf('<path');
  var need1 = symbolstring.substring(1,flagIndex);
  var need2 = symbolstring.substring(flagIndex);
  var need1json = need1.split(" ");
  var name = need1json[0].split("=")[1];
  var pureName = name.split('"')[1];
  console.log(pureName)
  var item = '<symbol> id="'+name+'" viewBox='+'"0 0 1024 1024">'+need2;
  if(!checkIcon(pureName)){
    doIconSymbol(item,pureName,i);
  }
}

2）、生成icon symbol：

var newArtboard = new Artboard({
  name: name,
  frame:{
    x:i*(1024+iconDist),
    y:0,
    width:1024,
    height:1024
  }
})

var group = sketch.createLayerFromData(symbolstring, 'svg');
group.name = name.toString();
group.frame.x= (newArtboard.frame.width-group.frame.width)/2
group.frame.y= (newArtboard.frame.height-group.frame.height)/2
group.parent = newArtboard;

if(checkboxVisible){
  group.exportFormats = ['png'];
}

var master = SymbolMaster.fromArtboard(newArtboard)

master.parent = symbolsPage;

3）、过滤掉已经添加的icon symbol

var icons = symbolsPage.layers || [];
for(var i=0;i<icons.length;i++){
  if(icons[i].name === name){
    return true
  }
}
return false