Resurrect rsvg-brunch

The Google PWA audit wants me to add a 512x512 icon for the Android app splash screen. Plus, the extra compilation during CI was never really a valid concern to begin with, and I'd rather have the fewer number of binary files in the repository, especially if I ever need more icons (or slightly different icons at larger sizes).
caleb531 · Jan 4, 2018 · 1a43b2e · 1a43b2e
1 parent eda27c3
commit 1a43b2e
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 7 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,6 +5,16 @@ node_js:
   - "8"
   - "7"
   - "6"
+# Installing rsvg-brunch requires a C++11 compiler and librsvg
+addons:
+  apt:
+    sources:
+    - ubuntu-toolchain-r-test
+    packages:
+    - g++-4.8
+    - librsvg2-dev
+env:
+  - CXX=g++-4.8
 install:
   - npm install
   - npm install coveralls

diff --git a/README.md b/README.md
@@ -58,6 +58,12 @@ brew install node
 npm install -g brunch
 ```
 
+Optionally, you can install librsvg if you want to build the application icons:
+
+```bash
+brew install librsvg
+```
+
 ### 2. Install project dependencies
 
 From the cloned project directory, run:

diff --git a/app/assets/icons/app-icon.png b/app/assets/icons/app-icon.png
diff --git a/app/assets/icons/favicon.png b/app/assets/icons/favicon.png
diff --git a/app/assets/index.html b/app/assets/index.html
@@ -9,7 +9,7 @@
 
   <link rel="stylesheet" href="styles/main.css" />
   <link rel="shortcut icon" href="icons/favicon.png" />
-  <link rel="apple-touch-icon" href="icons/app-icon.png" sizes="192x192" />
+  <link rel="apple-touch-icon" href="icons/apple-touch-icon.png" sizes="180x180" />
   <link rel="manifest" href="manifest.json" />
 </head>
 <body>

diff --git a/app/assets/manifest.json b/app/assets/manifest.json
@@ -9,9 +9,24 @@
   "background_color": "#ffffff",
   "icons": [
     {
-      "src": "icons/app-icon.png",
+      "src": "icons/app-icon-192.png",
       "sizes": "192x192",
       "type": "image/png"
+    },
+    {
+      "src": "icons/app-icon-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/app-icon-384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/app-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ]
 }
diff --git a/app/assets/icons/app-icon.svg → app/icons/app-icon.svg b/app/assets/icons/app-icon.svg → app/icons/app-icon.svg
diff --git a/brunch-config.js b/brunch-config.js
@@ -55,6 +55,21 @@ module.exports = {
         })
       ]
     },
+    // App icon generator
+    rsvg: {
+      conversions: [{
+        input: 'app/icons/app-icon.svg',
+        outputDefaults: {path: 'icons/app-icon-{width}.png'},
+        output: [
+          {width: 32, path: 'icons/favicon.png'},
+          {width: 180, path: 'icons/apple-touch-icon.png'},
+          {width: 192},
+          {width: 256},
+          {width: 384},
+          {width: 512}
+        ]
+      }]
+    },
     // Service worker cache for offline access
     swPrecache: {
       swFileName: 'service-worker.js',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "mocha": "^3.2.0",
     "postcss-brunch": "github:caleb531/postcss-brunch",
     "remap-istanbul": "^0.9.5",
+    "rsvg-brunch": "^0.5.0",
     "sass-brunch": "github:caleb531/sass-brunch",
     "sinon": "^2.2.0",
     "sinon-chai": "^2.10.0",