Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add build script and source files #19

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/node_modules
/build
50 changes: 43 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,20 +44,56 @@ If you want to install this package as dependency, you can install it from this
npm install --save https://github.com/HatScripts/circle-flags
```

### Custom builds

You can create a customized build by running the included script:

```
$ npm install
$ CORNER_RADIUS=25% npm run build
```

This will generate flags as squares with rounded corners instead of the default circle. The files will appear in the `build/` directory.

To build only selected icons, pass their codes as arguments:

```
$ CORNER_RADIUS=25% npm run build gb us ca
```

The following environment variables are currently recognized:

| Variable | Default value |
| --------------- | -------------- |
| `SRC_DIR` | `src/` |
| `BUILD_DIR` | `build/` |
| `CORNER_RADIUS` | `50%` (circle) |

## Contributing

To contribute, you need to have [svgo](https://github.com/svg/svgo) installed
(version 1.2.0 or newer).
To contribute, clone the repository and install the dependencies:

```
$ git clone https://github.com/HatScripts/circle-flags.git
$ cd circle-flags/
$ npm install
```

Edit the relevant SVG files under `src/`, then run the build script on them, e.g.:

First, edit the relevant SVG files in the `flags/` directory.
```
$ npm run build us ru cn
```

Then run `svgo` to optimize the SVG files:
The files will appear under `build/`. Check if everything looks good, then move the files into `flags/`.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be better to have the default build command output to flags/ directly? Since this is a git directory, it's not like overwriting the files would cause any irreversible damage. Unless you think this is useful for comparing the original and the edited built files?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I used it that way myself, to compare the file sizes against the default build, but maybe an extra "staging area" like that is redundant. I thought perhaps this could be useful to users who haven't decided yet which variant they want to use, so they could compare the builds side by side in their file manager. I'd like to see what others think before changing it!


```sh
svgo ./flags --recursive --config=svgo.yml
It's likely that your editor inflated the source files considerably—it's a good idea to prettify them before proceeding (requires [svgo](https://github.com/svg/svgo) >=1.2.0):

```
$ svgo --config=svgo.yml --recursive --pretty --indent=2 src/
```

Then commit the changes, and submit them as a pull request.
Commit the changes and submit them as a pull request.

## License

Expand Down
Loading