fisker · fisker · Jun 29, 2024 · Jun 29, 2024 · Jun 29, 2024 · Jun 29, 2024
diff --git a/__snapshots__/index.test.js.snap b/__snapshots__/index.test.js.snap
@@ -2,6 +2,20 @@
 
 exports[`Main 1`] = `
 [
+  {
+    "bundled": {
+      "name": "assets/car-lite-okg-C77L.svg",
+      "size": "12.9 kB (12907)",
+    },
+    "original": {
+      "name": "car-lite.svg",
+      "size": "26.5 kB (26539)",
+    },
+    "saved": {
+      "percentage": "-51.37%",
+      "size": "-13.6 kB (-13632)",
+    },
+  },
   {
     "bundled": {
       "name": "assets/demo-artwork-SS7dJ2TE.jpg",

diff --git a/fixtures/car-lite.svg b/fixtures/car-lite.svg
diff --git a/fixtures/index.html b/fixtures/index.html
@@ -8,10 +8,11 @@
 </head>
 <body>
     <div>
-<img src="./demo-artwork.jpg">
-<img src="./demo-device-screen.png">
-<img src="./demo-large-photo.jpg">
-
+      <img src="./demo-artwork.jpg">
+      <img src="./demo-device-screen.png">
+      <img src="./demo-large-photo.jpg">
+      <!-- https://github.com/jakearchibald/svgomg/blob/main/src/test-svgs/car-lite.svg -->
+      <img src="./car-lite.svg">
     </div>
 </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -1,38 +1,55 @@
 import assert from 'node:assert/strict'
-import {isSupporttedImage, squooshImages} from './squoosh.js'
+import {isSupportedImage, squooshImages} from './squoosh.js'
+import optimizeSvg from './svgo.js'
+
+async function minifyWithSquoosh(bundle) {
+  /** @type {import('vite').Rollup.OutputAsset[]} */
+  const images = Object.values(bundle).filter(
+    (assetOrChunk) =>
+      assetOrChunk.type === 'asset' && isSupportedImage(assetOrChunk.fileName),
+  )
+
+  if (images.length === 0) {
+    return
+  }
+
+  const compressed = await squooshImages(
+    images.map((image) => ({content: image.source, name: image.fileName})),
+  )
+
+  for (const [index, image] of images.entries()) {
+    bundle[image.fileName].source = compressed[index]
+  }
+}
+
+async function minifySvg(bundle) {
+  /** @type {import('vite').Rollup.OutputAsset[]} */
+  const images = Object.values(bundle).filter(
+    (assetOrChunk) =>
+      assetOrChunk.type === 'asset' && /\.svg$/i.test(assetOrChunk.fileName),
+  )
+
+  for (const {fileName: name, source: content} of images) {
+    bundle[name].source = optimizeSvg(content)
+  }
+}
 
 /**
  * @type {import('vite').Plugin}
  */
-const vitePluginImageSquoosh = {
-  name: 'vite-plugin-image-squoosh',
+const vitePluginImageMinify = {
+  name: 'vite-plugin-image-minify',
   apply: 'build',
   async generateBundle(_options, bundle) {
-    /** @type {import('vite').Rollup.OutputAsset[]} */
-    const images = Object.entries(bundle)
-      .filter(([fileName, assetOrChunk]) => {
-        assert.equal(fileName, assetOrChunk.fileName, 'Unexpected asset')
-        return (
-          assetOrChunk.type === 'asset' &&
-          isSupporttedImage(assetOrChunk.fileName)
-        )
-      })
-      .map(([, image]) => image)
-
-    if (images.length === 0) {
-      return
+    for (const [fileName, assetOrChunk] of Object.entries(bundle)) {
+      assert.equal(fileName, assetOrChunk.fileName, 'Unexpected asset')
     }
 
-    const compressed = await squooshImages(
-      images.map((image) => ({content: image.source, name: image.fileName})),
-    )
-
-    for (const [index, image] of images.entries()) {
-      bundle[image.fileName].source = compressed[index]
-    }
+    await minifyWithSquoosh(bundle)
+    await minifySvg(bundle)
   },
 }
 
-const createVitePluginImageSquoosh = () => vitePluginImageSquoosh
+const createVitePluginImageMinify = () => vitePluginImageMinify
 
-export default createVitePluginImageSquoosh
+export default createVitePluginImageMinify
diff --git a/index.test.js b/index.test.js
@@ -17,6 +17,7 @@ async function runVite() {
     write: false,
     logLevel: 'warn',
     plugins: [vitePluginImageSquoosh()],
+    build: {assetsInlineLimit: 0},
   })
 
   const assets = buildResult.output

diff --git a/lint-staged.config.cjs b/lint-staged.config.cjs
@@ -6,4 +6,7 @@
  *
  */
 
-module.exports = require('@fisker/lint-staged-config')
+module.exports = {
+  ...require('@fisker/lint-staged-config'),
+  '*.{css,htm,html,less,scss}': ['prettier --write'],
+}
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "vite-plugin-image-squoosh",
+  "name": "vite-plugin-image-minify",
   "version": "0.0.1",
-  "description": "Vite plugin to run squoosh on images.",
-  "homepage": "https://github.com/fisker/vite-plugin-image-squoosh#readme",
+  "description": "Vite plugin to minify images.",
+  "homepage": "https://github.com/fisker/vite-plugin-image-minify#readme",
   "bugs": {
-    "url": "https://github.com/fisker/vite-plugin-image-squoosh/issues"
+    "url": "https://github.com/fisker/vite-plugin-image-minify/issues"
   },
-  "repository": "fisker/vite-plugin-image-squoosh",
-  "funding": "https://github.com/fisker/vite-plugin-image-squoosh?sponsor=1",
+  "repository": "fisker/vite-plugin-image-minify",
+  "funding": "https://github.com/fisker/vite-plugin-image-minify?sponsor=1",
   "license": "MIT",
   "author": {
     "name": "fisker Cheung",
@@ -19,7 +19,8 @@
   "exports": "./index.js",
   "files": [
     "index.js",
-    "squoosh.js"
+    "squoosh.js",
+    "svgo.js"
   ],
   "scripts": {
     "clean": "run-p \"clean:*\"",
@@ -42,7 +43,8 @@
     "release": "runs-s lint test dist"
   },
   "dependencies": {
-    "@frostoven/libsquoosh": "^0.4.8"
+    "@frostoven/libsquoosh": "^0.4.8",
+    "svgo": "^3.3.2"
   },
   "devDependencies": {
     "@fisker/eslint-config": "13.1.0",

diff --git a/readme.md b/readme.md
@@ -1,37 +1,37 @@
-# vite-plugin-image-squoosh
+# vite-plugin-image-minify
 
 [![Build Status][github_actions_badge]][github_actions_link]
 [![Coverage][coveralls_badge]][coveralls_link]
 [![Npm Version][package_version_badge]][package_link]
 [![MIT License][license_badge]][license_link]
 
-[github_actions_badge]: https://img.shields.io/github/actions/workflow/status/fisker/vite-plugin-image-squoosh/continuous-integration.yml?branch=main&style=flat-square
-[github_actions_link]: https://github.com/fisker/vite-plugin-image-squoosh/actions?query=branch%3Amain
-[coveralls_badge]: https://img.shields.io/coveralls/github/fisker/vite-plugin-image-squoosh/main?style=flat-square
-[coveralls_link]: https://coveralls.io/github/fisker/vite-plugin-image-squoosh?branch=main
-[license_badge]: https://img.shields.io/npm/l/vite-plugin-image-squoosh.svg?style=flat-square
-[license_link]: https://github.com/fisker/vite-plugin-image-squoosh/blob/main/license
-[package_version_badge]: https://img.shields.io/npm/v/vite-plugin-image-squoosh.svg?style=flat-square
-[package_link]: https://www.npmjs.com/package/vite-plugin-image-squoosh
+[github_actions_badge]: https://img.shields.io/github/actions/workflow/status/fisker/vite-plugin-image-minify/continuous-integration.yml?branch=main&style=flat-square
+[github_actions_link]: https://github.com/fisker/vite-plugin-image-minify/actions?query=branch%3Amain
+[coveralls_badge]: https://img.shields.io/coveralls/github/fisker/vite-plugin-image-minify/main?style=flat-square
+[coveralls_link]: https://coveralls.io/github/fisker/vite-plugin-image-minify?branch=main
+[license_badge]: https://img.shields.io/npm/l/vite-plugin-image-minify.svg?style=flat-square
+[license_link]: https://github.com/fisker/vite-plugin-image-minify/blob/main/license
+[package_version_badge]: https://img.shields.io/npm/v/vite-plugin-image-minify.svg?style=flat-square
+[package_link]: https://www.npmjs.com/package/vite-plugin-image-minify
 
-> Vite plugin to run squoosh on images.
+> Vite plugin to minify images.
 
 ## Install
 
 ```bash
-yarn add vite-plugin-image-squoosh --dev
+yarn add vite-plugin-image-minify --dev
 ```
 
 ## Usage
 
-Add `vite-plugin-image-squoosh` to your Vite config file.
+Add `vite-plugin-image-minify` to your Vite config file.
 
 ```js
-import vitePluginImageSquoosh from 'vite-plugin-image-squoosh'
+import vitePluginImageMinify from 'vite-plugin-image-minify'
 
 export default {
   plugins: [
-    vitePluginImageSquoosh(),
+    vitePluginImageMinify(),
   ],
 },
 ```
diff --git a/squoosh.js b/squoosh.js
@@ -64,6 +64,6 @@ async function squooshImages(files) {
   return result
 }
 
-const isSupporttedImage = (filename) => Boolean(getEncoder(filename))
+const isSupportedImage = (filename) => Boolean(getEncoder(filename))
 
-export {squooshImages, isSupporttedImage}
+export {squooshImages, isSupportedImage}
diff --git a/svgo.js b/svgo.js
@@ -0,0 +1,8 @@
+import {optimize} from 'svgo'
+
+function minify(content) {
+  const result = optimize(content)
+  return result.data
+}
+
+export default minify