Yelp icon square space android#
Yelp icon square space code#

We optimize SVGs for the SVG spritesheet while we simultaneously convert the SVGs to PNGs. Finally, we kick off the builds for each platform: Web We ensure all SVGs are valid and and that the naming of the icon follows our pre-defined naming scheme. The first stage of the pipeline is to run unit tests for the repository and some checks on the icons themselves. When a designer commits a new SVG icon to our git repository, we kick off the jenkins build pipeline. For SVGs, we optimize with SVGO and clean and manipulate with lxml.

PNG stitching and WebP conversion is handled with PIL. For image conversion from SVG to PNG and scaling we used CairoSVG. At Yelp, our traditional build systems are supported using make (this does not include platform specific build system such as gradle) with Jenkins running on Linux and OSX as our CI service.Īll image manipulation is done in Python and one node package (SVGO). To automate creating these assets, we used build systems and CI.

Yelp icon square space android#

Additionally, both Android and iOS require icons at different pixel densities. The Web needs to support SVGs and PNGs, Android requires WebPs, and iOS requires PNGs. Icon Conversion and ScalingĮach platform has different image requirements. In defining an SVG-first icon system, the first task was to convert icons to different image formats in a fluid, programmatic way.

The system had to support conversion and scaling of icons and publish packages that could be consumed by all platforms. Once the design specifications were finalized, we turned to creating a build/delivery system. By creating a box that bounds each icon we were able to balance the visual weights individually and have the confidence that icons would look great on all platforms. Finally, we needed to ensure that icon spacing was consistent so that developers could easily align the icons in whatever context they needed to use them. Since the Yelp product is supported on a variety of devices, each image had to define icon size in device independent pixels or in our case defining 2x, 3x, etc. Using SVGs as the base image format allows us to scale an icon without losing quality and effortlessly colorize the icons via code. A few key choices in the beginning set the project up for success: using the SVG format, designing for pixel density, and using a bounding box. Their effort redefined the icon design standard, creating a unified set that looks great across all platforms. The process started with our design team. We went from passing images through emails, Dropbox, and even Jira to automatically delivering the icons to the developers right when they needed them. This story is about taking the human process of developing, sharing, and requesting new icons for different platforms and automating it. Yelp is divided into several different product teams with a mix of developers from each platform, so updating icons requires collaboration with all teams. With a product as large as ours, (with around 120 metaphors) making sure that new icons with varying colors and sizes are up-to-date and look correct in all resolutions across all platforms is no easy feat. The workflow wasn’t always this streamlined and was only made possible through a cross-team collaboration with Android, iOS, Web, and Design at Yelp.

Yelp icon square space code#

At 10:05 AM iOS has received a newly versioned CocoaPod containing 1x, 2x, and 3x PNGs, Android has received an AAR Library containing mdpi, hdpi, xhdpi, and xxhdpi WebPs, and the Web CDN has a new SVG and PNG spritesheet, code to manage the PNG fallback for our IE8 users, and a new Python package to access the icon in a template. Var gform gform||(document.It’s 10:00 AM and a designer just created a new icon for Yelp.