search

HatScripts / circle-flags

A collection of 400+ minimal circular SVG country, state and language flags
https://hatscripts.github.io/circle-flags
MIT License
928 stars 248 forks source link

Add build script and source files #19

Closed climech closed 3 years ago

climech commented 3 years ago

(This request depends on the other one fixing color-bleeding issues. Check it out first before reading this! Big thanks for making this awesome icon set, BTW!)

Add build script and source files

This adds scripts/build.js and a src/ directory containing the "base" unmasked icons from which the builds are generated. The flags/ directory becomes the location for the default build, preserving backward compatibility.

Building/contributing instructions were added to README.md.

Purpose

  1. Simplify the development/design process by automating the repetitive task of applying masks
  2. Make it possible for users to make customized builds

Features

At the moment the script can apply a circular/rounded rect mask, allowing the radius to be customized. It uses a <circle> as the mask shape when CORNER_RADIUS is set to 50% (default), otherwise <rect> is used.

The script could be extended in the future, e.g. by making it possible to use a custom palette to replace the default one.

Dependencies

The script adds 2 devDependencies to package.json:

Usage

Default build (all flags):

$ npm install
$ npm run build

Selected flags only:

$ npm run build gb us ca

Customized build with a 25% corner radius:

$ BUILD_DIR=rounded/ CORNER_RADIUS=25% npm run build

Recognized environment variables:

Variable Default value
SRC_DIR src/
BUILD_DIR build/
CORNER_RADIUS 50%
waldyrious commented 3 years ago

@climech I love this work, awesome job! The square flags look amazing and I'm actually wondering if we shouldn't consider documenting in the README how they can be used directly. Maybe even have a couple more gallery pages displaying a square and a rounded-corners variants of the flags. But that can remain for a different PR. 🙂

waldyrious commented 3 years ago

@HatScripts I believe the branch renaming retargeted all open PRs (which would be just this one) from master to main, and the deletion of main as discussed in #20 then closed all open PRs targeting that branch (again, just this one was affected). Sorry for suggesting that course of action myself! 😳

I suppose it might be possible to manually retarget the PR towards gh-pages, either by you or by @climech (or both). If not, the PR would have to be recreated.