Merge pull request #21 from unvt/dev-sdf

#2 SDF icons support

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -22,10 +22,10 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn
+        run: npm install
         env:
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
       - name: build
-        run: yarn run build
+        run: npm run build
       - name: test
-        run: yarn test
+        run: npm run test

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
 *.tgz
+.DS_Store

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
 }

README.md

@@ -3,15 +3,10 @@
 - SVG and PNG icon inputs
 - Multiple pixel ratio support
 - Uses `sharp` for rendering (compatibility with newer Node.js versions and architectures)
+- Supports SDF icons
 
 ## Install
 
-```bash
-yarn add @unvt/sprite-one
-```
-
-or
-
 ```bash
 npm install @unvt/sprite-one
 ```
@@ -20,7 +15,7 @@ npm install @unvt/sprite-one
 
 - CLI
 
-```zsh
+```bash
 $ sprite-one -h
 Usage: sprite-one [options] <sprite_filename>
 
@@ -30,6 +25,7 @@ Options:
   -v, --version            output the version number
   -i, --icon <icons...>    A folder path which stores SVG icons. Multiple folders can be set.
   -r, --ratio <ratios...>  pixel ratio to generate sprite. default is 1.
+  --sdf                    generate sprite with SDF (Signed Distance Field). (default: false)
   -h, --help               display help for command
 ```
 
@@ -54,14 +50,24 @@ If the `@2x` version doesn't exist, the default icon will be used and scaled up
 
 Note that while this feature is supported for SVG icons, this is usually unneccesary because SVG, as a vector format, can be scaled without problems.
 
+### SDF icons support
+
+SDF icons can be generated by using the `--sdf` option. This allows users to apply [icon-color](https://maplibre.org/maplibre-style-spec/layers/#paint-symbol-icon-color) and [icon-halo-color](https://maplibre.org/maplibre-style-spec/layers/#paint-symbol-icon-halo-color) properties in Maplibre style to able to change the colour dynamically.
+
+```javascript
+import { generateSprite } from '@unvt/sprite-one'
+
+generateSprite('../out', '../input', [1], true).then(() => {})
+```
+
 ## Develop
 
 via `bin/index.ts`
 
 ```bash
 git clone https://github.com/unvt/sprite-one.git
 cd sprite-one
-yarn
+npm install
 npx ts-node src/bin/index.ts ../../tmp/out --icon ../../tmp/maki/icons
 npx ts-node src/bin/index.ts ../../tmp/out --icon ../../tmp/maki/icons --ratio=2
 npx ts-node src/bin/index.ts ../../tmp/out --icon ../../tmp/maki/icons --icon ../../tmp/maki/icons2 --ratio=1 --ratio=2