Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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(⌘) + `立即导出代码

test

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

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

About

Export your sketch layer for code usage

Resources

Packages

No packages published