feat: 优化生成 css 体积

TMaize · Jun 25, 2023 · a0436d3 · a0436d3
1 parent 065c38d
commit a0436d3
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@ Nodejs-based tool for convert SVG to css icons
 ```
 npm install svg-css-icon -g
 
+svg-css-icon --help
+
 svg-css-icon --input test --output test/icon.css --class ic
 ```
 

diff --git a/bin/svg-css-icon.js b/bin/svg-css-icon.js
@@ -8,11 +8,31 @@ function getStringArg(name) {
   return process.argv[idx + 1]
 }
 
+function printHelp() {
+  console.log(`
+Nodejs-based tool for convert SVG to css icons.
+
+Usage:
+  svg-css-icon [flags]
+
+Flags:
+  --input  string   svg path or directory
+  --output string   css output path
+  --class  string   icon class name (default "icon")
+  --encode string   svg encode type. base64/xml (default "base64")
+`)
+}
+
 try {
+  if (process.argv.includes('--help')) {
+    printHelp()
+    return
+  }
   build({
     input: getStringArg('input'),
     output: getStringArg('output'),
-    class: getStringArg('class')
+    class: getStringArg('class'),
+    encode: getStringArg('encode')
   })
 } catch (err) {
   console.error(err.message)

diff --git a/package.json b/package.json
@@ -17,7 +17,9 @@
     "url": "git://github.com/TMaize/svg-css-icon.git"
   },
   "scripts": {
-    "test": "node bin/svg-css-icon.js --input test --output test/icon.css --class ic"
+    "test": "npm run build:base64 && npm run build:utf8",
+    "build:base64": "node bin/svg-css-icon.js --encode base64 --input test --output test/icon-base64.css --class aa",
+    "build:utf8": "  node bin/svg-css-icon.js --encode utf8   --input test --output test/icon-uft8.css   --class bb"
   },
   "keywords": [
     "svg",

diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,7 @@ const { compressSVG, isColorful, encodeSVG } = require('./tool')
 
 /**
  * 生成图标样式文件
- * @param {{input:string, output:string, class:string|'icon'}} options
+ * @param {{input:string, output:string, class:string|'icon', encode: 'base64'|'utf8'}} options
  */
 module.exports = function build(options) {
   if (!options.input) {
@@ -15,6 +15,10 @@ module.exports = function build(options) {
     throw new Error('output is required')
   }
 
+  if (options.encode && !['base64', 'utf8'].includes(options.encode)) {
+    throw new Error('unknown encode type: ' + options.encode)
+  }
+
   options.class = options.class || 'icon'
   options.input = path.resolve(options.input)
   options.output = path.resolve(options.output)
@@ -50,12 +54,12 @@ module.exports = function build(options) {
     let svg = fs.readFileSync(file, 'utf-8')
     const colorful = isColorful(svg)
     svg = compressSVG(svg, colorful)
-    svg = encodeSVG(svg)
+    svg = encodeSVG(svg, options.encode)
 
     if (colorful) {
-      content += `\n.${options.class}-${name} {\n  background-image: url(${svg});\n}\n`
+      content += `\n.${options.class}-${name} {\n  background-image: url("${svg}");\n}\n`
     } else {
-      content += `\n.${options.class}-${name} {\n  --data: url(${svg});\n  mask-image: var(--data);\n  -webkit-mask-image: var(--data);\n  background-color: currentColor;\n}\n`
+      content += `\n.${options.class}-${name} {\n  --data: url("${svg}");\n  mask-image: var(--data);\n  -webkit-mask-image: var(--data);\n  background-color: currentColor;\n}\n`
     }
   }
 

diff --git a/src/tool.js b/src/tool.js
@@ -57,9 +57,20 @@ function isColorful(content) {
  * @param {string} content svg内容
  * @return {string}
  */
-function encodeSVG(content) {
+function encodeSVG(content, type) {
+  if (type === 'utf8') {
+    const encoded = content
+      .replace(/"/g, "'")
+      .replace(/%/g, '%25')
+      .replace(/#/g, '%23')
+      .replace(/{/g, '%7B')
+      .replace(/}/g, '%7D')
+      .replace(/</g, '%3C')
+      .replace(/>/g, '%3E')
+    return `data:image/svg+xml;utf8,${encoded}`
+  }
   const buffer = Buffer.from(content)
-  return (dataUri = `data:image/svg+xml;base64,${buffer.toString('base64')}`)
+  return `data:image/svg+xml;base64,${buffer.toString('base64')}`
 }
 
 module.exports = {

diff --git a/test/icon-base64.css b/test/icon-base64.css
diff --git a/test/icon-uft8.css b/test/icon-uft8.css
diff --git a/test/icon.css b/test/icon.css
diff --git a/test/index.html b/test/index.html
@@ -4,16 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="./icon.css" />
+    <link rel="stylesheet" href="./icon-base64.css" />
+    <link rel="stylesheet" href="./icon-uft8.css" />
     <style>
-      body {
+      .wrap {
         margin: 0;
         padding: 10px;
         display: flex;
         flex-flow: row wrap;
       }
 
-      body > div {
+      .wrap > div {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -29,7 +30,7 @@
         margin-top: -1px;
       }
 
-      body > div > span::after {
+      .wrap > div > span::after {
         position: absolute;
         left: 0;
         bottom: 0;
@@ -42,14 +43,28 @@
     </style>
   </head>
   <body>
-    <div>
-      <span class="ic ic-home"></span>
+    <div class="wrap">
+      <div>
+        <span class="aa aa-home"></span>
+      </div>
+      <div>
+        <span class="aa aa-file"></span>
+      </div>
+      <div>
+        <span class="aa aa-certificate"></span>
+      </div>
     </div>
-    <div>
-      <span class="ic ic-file"></span>
-    </div>
-    <div>
-      <span class="ic ic-certificate"></span>
+
+    <div class="wrap">
+      <div>
+        <span class="bb bb-home"></span>
+      </div>
+      <div>
+        <span class="bb bb-file"></span>
+      </div>
+      <div>
+        <span class="bb bb-certificate"></span>
+      </div>
     </div>
   </body>
 </html>