funfungo / ImageCodeExporter

Export your sketch layer for code usage

Image Code Exporter

Export your sketch layer with data URI for code usage
以data URI代码形式导出sketch中的图层

Usage

1. Choose the layer you want to export
   选择你想要导出的图层

2. Use shortcut command(⌘) + ` to export your code immediately
   使用快捷键command(⌘) + `立即导出代码

Feature

• Support PNG and SVG image type, export PNG file by encoding it with base64 format while using encoded xml when export SVG file.(See this article Probably Don’t Base64 SVG )
  支持PNG和SVG图片格式, 以base64格式导出PNG图片，以XML格式导出SVG文件（为什么不用base64导出SVG,看这篇文章 Probably Don’t Base64 SVG ）

• Provide multiple templates for different usage, including code in html(innerHtml), css background and css mask.
  提供多种代码使用场景模板，包括在html中嵌入的代码(innerHtml), css background或css mask

• Auto save your last copy preference
  自动保存你上一次复制的选项

• Compress PNG file with advpng
  使用advpng压缩PNG文件

• Compress SVG file widh svgo
  使用svgo压缩SVG文件

Installation

• Download the latest release of the plugin
  下载 最新的发布版本

• Un-zip
  解压

• Double-click on imagecodeexporter.sketchplugin
  双击imagecodeexporter.sketchplugin

• You may need to allow the plugin to access your system in "Security & Privacy"
  可能需要在系统设置"安全与权限"中设置插件的权限

Acknowledgements

Thanks to these project to give me some ideas about how to make this plugin

• svgo-compressor sketch plugin of compressing svg while export svg file

• sketch-image-compressor sketch plugin of compressing image

Development Guide

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

Usage

Install the dependencies

npm install

Once the installation is done, you can run some commands inside the project folder:

npm run build

To watch for changes:

npm run watch