iconSketchLibrary.js

// ===========================================================================

// Starting point:
// - Sketch file with many shapes (icons).
// - Ideally each icon category is its own page named appropriately.

// How to use it:
// - Open Sketch file and press Ctrl + Shift + K.
// - Paste script and click "Run".

// Script will:
// - Create a color placeholder symbol.
// - Turn each shape into symbol with standard size.
// - Apply color over it and turn icon shape into mask.

// Then you can:
// - File › Add as Library
// - Switch to your working file and start using icons from your new library.
// - Create more color symbols on your working file to use as overrides.
//   Make sure color symbols are the same size as the one on the library.

// ===========================================================================

// OPTIONAL CUSTOMIZATION

const symbolSize = 40                     // Symbol size
const symbolsPerRow = 5                   // Number of symbols per row on grid
const symbolSpacing = symbolSize / 2      // Space between each symbol on grid
const placeholderColor = "#ff9999"        // Icon placeholder color
const placeholderWidth = symbolSize * 2   // Width of placeholder symbol
const placeholderHeight = symbolSize / 2  // Height of placeholder symbol


// ===========================================================================

// Import Sketch API
const Sketch = require('sketch')

// Get current document
const document = Sketch.Document.getSelectedDocument()

// Create a Colors page where we'll add our color placeholder
const colorsPage = new Sketch.Page({ name: "Colors", parent: document })

// Create color symbol master
const colorMaster = new Sketch.SymbolMaster({
    name: "color/placeholder",
    layers: [ 
        new Sketch.Shape({ // make colored rectangle inside
            name: "color placeholder",
            frame: new Sketch.Rectangle(0, 0, placeholderWidth, placeholderHeight),
            style: {
                fills: [{
                    color: placeholderColor,
                    fillType: Sketch.Style.FillType.Color
                }]
            }
        })
    ],
    frame: new Sketch.Rectangle(0, 0, placeholderWidth, placeholderHeight),
    parent: colorsPage
})

// Loop through pages
document.pages.forEach( (page) => { 

    // Ignore colors page
    if ( page.name == "Colors" ) { return }

    var symbols = []

    // Loop through layers
    page.layers.forEach( (layer, i) => {

        // Set symbol size and position
        const symbolRect = new Sketch.Rectangle(
                (i % symbolsPerRow) * (symbolSize + symbolSpacing),
                Math.floor(i / symbolsPerRow) * (symbolSize + symbolSpacing),
                symbolSize,
                symbolSize
        )

        // Reposition layer for new symbol size
        layer.frame.x = (symbolSize - layer.frame.width) / 2
        layer.frame.y = (symbolSize - layer.frame.height) / 2

        // Create instance of color symbol
        const color = colorMaster.createNewInstance()
        color.name = '🎨 color'

        // Resize color symbol
        color.frame.width = symbolSize
        color.frame.height = symbolSize
    
        // Create symbol and add layer
        const symbol = new Sketch.SymbolMaster({
            name: page.name + "/" + layer.name,
            layers: [layer, color],
            frame: symbolRect
        })

        // Store symbol temporarily
        symbols.push(symbol)

    })

    // Replace all layers with the new symbols
    page.layers = symbols

})


// Turn shapes into masks
// This is a separate loop because Sketch doesn't seem to have masking on the other API

// Loop document pages
context.document.pages().forEach( (page) => {

    // Ignore Colors page
    if ( page.name() == "Colors" ) { return }

    // Loop page layers (the new symbols)
    page.layers().forEach( (symbol) => {
      
        // Select shape layer and turn into mask
        const layer = symbol.firstLayer()
        layer.hasClippingMask = true
        layer.clippingMaskMode = 1
    })
})