Export sketch symbols as SVG and re-use them elsewhere
SVGSymbols aims to Sketch symbols re-usable across other platforms. It exports.svgsymbol
files that contain additional metadata about the structure and semantics of the symbol that keeps the overrides defined in sketch (text fields and image placeholders) editable elsewhere, e.g. in Framer (using framer-svgsymbols) or in your styleguide.
svgsymbols:name
attribute for overrides, use those as override names# build with hot reload
npm run watch
# build for production
npm run build
To customize Babel, you have two options:
You may create a .babelrc
file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a "presets" object, it will replace & reset all Babel presets that skpm defaults to.
If you'd like to modify or add to the existing Babel config, you must use a webpack.skpm.config.js
file. Visit the Webpack section for more info.
To customize webpack create webpack.skpm.config.js
file which exports function that will change webpack's config.
/**
* Function that mutates original webpack config.
* Supports asynchronous changes when promise is returned.
*
* @param {object} config - original webpack config.
* @param {boolean} isPluginCommand - wether the config is for a plugin command or a resource
**/
module.exports = function (config, isPluginCommand) {
/** you can change config here **/
}
To view the output of your console.log
, you have a few different options:
Console.app
and look for the sketch logs~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log
fileSkpm provides a convenient way to do the latter:
skpm log
The -f
option causes skpm log
to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input