Blokks

Replace icons

All icons used in the schedule are SVG. SVG files are vector based, which means your icons will look great on all devices and resolutions. Secondly, since SVG is XML, they’re are highly compressible and featherlight to load. And last but not least, SVG files are completely styleable with CSS.

To replace the default Blokks icons we need to create a new icon set. An icon set contains the following files:

filename description
arrow-left-icon.svg Left arrow used in the Controls component
arrow-right-icon.svg Right arrow used in the Controls component
close-icon.svg The symbol used in the close button of the Activity Details component
dropdown-icon.svg Symbol used when the Date Selector is a dropdown menu
favorite-icon.svg Symbol used to indicate the favorite action
unfavorite-icon.svg Symbol used to indicate the unfavorite action

You should note that the embed uses the CSS fill property to style icons. Convert all shapes to fills when creating your own icons. Also, fill colors set in tools like Sketch or Adobe Illustrator are overriden by CSS.

Optimizing SVGs

SVG files, especially when exported from tools like Sketch or Adobe Illustrator contain a lot of information that can be safely removed or converted without affecting rendering result. Optimizing and compressing your SVGs is simply done with a command-line tool called SVGO.

SVGO requires you to have Node.js installed on your computer. If Node.js is installed, run the following command from your console:

npm install -g svgo

This will install SVGO. After installing, SVGO can be run with the following command:

svgo -f path/to/folder/with/svg/files

This command will use the default SVGO settings to compress and override all files in the path/to/folder/with/svg/files folder. Make sure your replace this with the directory containing your svg files.

Note: SVGOMG is a webbased interface that allows you to drag & drop your SVG files and get an optimized version. There are also SVGO plugins for both Sketch and Adobe Illustrator.

Create spritesheets

Spritesheets combine multiple images into a single file. A website using spritesheets loads faster because it has to load just one, instead of multiple images. To create a spritesheet we use another command-line tool named svg-sprite. Again, Node.js is required for this.

First, install svg-sprite by running the following command:

npm install -g svg-sprite

After installing svg-sprite, run:

svg-sprite --symbol --svg-xmldecl=false --shape-transform='' --symbol-dest='.' --symbol-sprite='icon-set.svg' --symbol-example=false path/to/folder/with/svg/files/*.svg

This will merge all the SVGs into one file named icon-set.svg.

Note: IcoMoon is a web-based interface that does a great job of producing SVG spritesheets. You can simply drag & drop your SVGs and export them as a single spritesheet.

There’s just one thing left to do: have the embed use the new iconset. Simply add a link pointing to the iconset to the <head> of your page, like so:

<link href='icons.svg' blokks-icons>

Make sure you replace icons.svg with the location of your iconset. That’s all there is to it!

Styling SVGs

Replacing icons can cause them to be too big or too small. Similar to changing fonts, we can fix this by selecting the icon in the Developers Tools and change its size. For example, here’s how you can resize the close icon to 50px of the Activity details component:

.blokks-activity-details__close-button .svg-icon {
  width: 50px;
  height: 50px;
}