Merge pull request #176 from watergis/feat/serve-sdf-option

feat: add --sdf option to allow users to use SDF sprite in serve command

docs/source/usage/commandline_interface.rst

@@ -98,6 +98,7 @@ Realtime editor on browser
     --mapbox-access-token [mapboxAccessToken]    Access Token for the Mapbox
     -i, --sprite-input [<icon input directory>]  directory path of icon source to build icons. The default <icon
                                                  source> is `icons/`
+    --sdf                                        Allows to use SDF sprite in charites
     --port [port]                                Specify custom port
     -h, --help                                   display help for command
 
@@ -112,4 +113,6 @@ Charites has three options for `serve` command.
 
 - ``--sprite-input`` - If you are building icon spritesheets with Charites, you can specify the directory of SVG files to compile here. See the ``build`` command for more information.
 
+- ``--sdf`` - if this option is used together with ``--sprite-input``, the viewer will generate SDF sprite. If the option is not specified, non SDF sprite will be generated.
+
 - ``--port`` - Set http server's port number. When not specified, the default is 8080.

src/cli/serve.ts

@@ -21,6 +21,7 @@ program
     '-i, --sprite-input [<icon input directory>]',
     'directory path of icon source to build icons. The default <icon source> is `icons/`',
   )
+  .option('--sdf', 'Allows to use SDF sprite in charites')
   .option('--port [port]', 'Specify custom port')
   .option('--no-open', "Don't open the preview in the default browser")
   .action(async (source: string, serveOptions: serveOptions) => {
@@ -30,6 +31,7 @@ program
     options.port = serveOptions.port
     options.spriteInput = serveOptions.spriteInput
     options.open = serveOptions.open
+    options.sdf = serveOptions.sdf
     if (!fs.existsSync(defaultSettings.configFile)) {
       fs.writeFileSync(
         defaultSettings.configFile,

src/commands/serve.ts

@@ -17,6 +17,7 @@ export interface serveOptions {
   port?: string
   spriteInput?: string
   open?: boolean
+  sdf?: boolean
 }
 
 export async function serve(source: string, options: serveOptions) {
@@ -57,7 +58,7 @@ export async function serve(source: string, options: serveOptions) {
       ) {
         return
       }
-      await buildSprite(options.spriteInput, spriteOut, 'sprite')
+      await buildSprite(options.spriteInput, spriteOut, 'sprite', options.sdf)
     }
     await spriteRefresher()
   }

src/lib/build-sprite.ts

@@ -5,9 +5,10 @@ export async function buildSprite(
   svgPath: string,
   publicPath: string,
   iconSlug: string,
+  sdf = false,
 ): Promise<void> {
   const pxRatios = [1, 2]
   const outPath = path.join(publicPath, iconSlug)
-  await generateSprite(outPath, [svgPath], pxRatios)
+  await generateSprite(outPath, [svgPath], pxRatios, sdf)
   return
 }