v1.0.0-alpha.2

- add many options for SVG
- remove options for components
- add SvgRender class to update SVG from options
- add options to library file and `window`
- add `title` prop to components
- add `reactive` prop to Vue components
- remove `display` prop from Vue components

README.md

@@ -15,7 +15,7 @@ Import easily your SVG. Powered by [unplugin](https://github.com/unjs/unplugin).
 
 > Designed to be a replacement of [`kiwilan/nuxt-svg-transformer`](https://github.com/kiwilan/nuxt-svg-transformer), a Nuxt module.
 
-Use SVG into modern tools is not easy, especially when you want to use SVG as component. This plugin will parse your SVG files and create a cache file to import them easily with a library index file. It works with any framework with Vite/Webpack, but some components are ready-to-use for Vue and React. You could also create your own component for your favorite framework. Built for TypeScript, but works with JavaScript.
+Use SVG into modern tools is not easy, especially when you want to use SVG as component. **This plugin will parse your SVG files** and **create a cache file** to **import them easily with a library index file**. It **works with any framework with Vite/Webpack**, but some components are ready-to-use for Vue, Nuxt and React. You could also create your own component for your favorite framework. **Built for TypeScript, but works with JavaScript**.
 
 > **Warning**
 >
@@ -530,7 +530,7 @@ Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed re
 
 - [UnJS](https://github.com/unjs): UnJS team for [`unplugin`](https://github.com/unjs/unplugin)
 - [`ewilan-riviere`](https://github.com/ewilan-riviere): author
-- [`antfu`](https://github.com/antfu/unplugin-starter): for the starter template
+- [`antfu`](https://github.com/antfu/unplugin-starter): for the starter template, `@antfu/eslint-config` and his amazing work
 
 ## License
 
@@ -548,7 +548,7 @@ The MIT License (MIT). Please see [License File](LICENSE.md) for more informatio
 [license-href]: https://github.com/kiwilan/unplugin-svg-transformer/blob/main/README.md
 [tests-src]: https://img.shields.io/github/actions/workflow/status/kiwilan/unplugin-svg-transformer/tests.yml?branch=main&label=tests&style=flat-square&colorA=18181B
 [tests-href]: https://github.com/kiwilan/unplugin-svg-transformer/actions/workflows/tests.yml
-[codecov-src]: https://codecov.io/gh/kiwilan/unplugin-svg-transformer/branch/main/graph/badge.svg?token=epJribIFGR
+[codecov-src]: https://img.shields.io/codecov/c/gh/kiwilan/unplugin-svg-transformer/main?style=flat&colorA=18181B&colorB=F0DB4F
 [codecov-href]: https://codecov.io/gh/kiwilan/unplugin-svg-transformer
 [style-src]: https://antfu.me/badge-code-style.svg
 [style-href]: https://github.com/antfu/eslint-config

examples/vue3/src/icons.ts

@@ -4,7 +4,29 @@
 // @ts-nocheck
 // Generated by unplugin-svg-transformer
 export type SvgName = 'download' | 'social/twitter' | 'vite' | 'vue-2' | 'vue' | 'default'
-export const options = {"cacheDir":"./node_modules/unplugin-svg-transformer/cache","fallback":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8.45v4M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18Zm.05-5.55v.1h-.1v-.1h.1Z\"/></svg>","global":false,"isNuxt":false,"isTesting":true,"libraryDir":"./src","svgDir":"./src/svg","useTypes":true}
+export const options = {
+  fallback: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8.45v4M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18Zm.05-5.55v.1h-.1v-.1h.1Z\"/></svg>",
+  svg: {
+    classDefault: [
+      "svg-icon"
+    ],
+    clearSize: "all",
+    clearClass: "all",
+    clearStyle: "all",
+    currentColor: true,
+    inlineStyleDefault: [
+      "display: inline-block; vertical-align: middle;"
+    ],
+    sizeInherit: true,
+    title: true
+  },
+  warning: false,
+  cacheDir: "./node_modules/unplugin-svg-transformer/cache",
+  global: false,
+  libraryDir: "./src",
+  svgDir: "./src/svg",
+  useTypes: true
+}
 export const svgList: Record<SvgName, () => Promise<{ default: string }>> = {
   'download': () => import('../node_modules/unplugin-svg-transformer/cache/download.ts'),
   'social/twitter': () => import('../node_modules/unplugin-svg-transformer/cache/social/twitter.ts'),
@@ -15,13 +37,12 @@ export const svgList: Record<SvgName, () => Promise<{ default: string }>> = {
 }
 
 export async function importSvg(name: SvgName): Promise<string> {
-  if (!svgList[name] && options.log)
+  if (!svgList[name] && options.warning)
     console.warn(`Icon ${name} not found`)
-  name = svgList[name] || svgList["default"]
-  const svg = await name()
-  if (svg.default)
-    return svg.default
-  return svg
+  const icon = svgList[name] || svgList["default"]
+  const svg = await icon()
+
+  return svg.default
 }
 
 if (typeof window !== 'undefined') {

examples/vue3/vite.config.ts

@@ -9,6 +9,16 @@ export default defineConfig({
     svgTransformer({
       // global: true,
       fallback: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8.45v4M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18Zm.05-5.55v.1h-.1v-.1h.1Z"/></svg>',
+      svg: {
+        title: true,
+        classDefault: ['svg-icon'],
+        clearClass: 'all',
+        clearSize: 'all',
+        clearStyle: 'all',
+        currentColor: true,
+        inlineStyleDefault: ['display: inline-block; vertical-align: middle;'],
+        sizeInherit: true,
+      },
     }),
   ],
 })

live/vue3/src/icons.ts

@@ -4,6 +4,22 @@
 // @ts-nocheck
 // Generated by unplugin-svg-transformer
 export type SvgName = 'download' | 'social/twitter' | 'vite' | 'vue-2' | 'vue' | 'default'
+export const options = {
+  fallback: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>",
+  svg: {
+    clearSize: "none",
+    clearClass: "none",
+    clearStyle: "none",
+    currentColor: false,
+    sizeInherit: false
+  },
+  warning: true,
+  cacheDir: "./node_modules/unplugin-svg-transformer/cache",
+  global: false,
+  libraryDir: "./src",
+  svgDir: "./src/svg",
+  useTypes: true
+}
 export const svgList: Record<SvgName, () => Promise<{ default: string }>> = {
   'download': () => import('../node_modules/unplugin-svg-transformer/cache/download.ts'),
   'social/twitter': () => import('../node_modules/unplugin-svg-transformer/cache/social/twitter.ts'),
@@ -14,16 +30,17 @@ export const svgList: Record<SvgName, () => Promise<{ default: string }>> = {
 }
 
 export async function importSvg(name: SvgName): Promise<string> {
-  if (!svgList[name])
+  if (!svgList[name] && options.warning)
     console.warn(`Icon ${name} not found`)
-  name = svgList[name] || svgList["default"]
-  const svg = await name()
-  if (svg.default)
-    return svg.default
-  return svg
+  const icon = svgList[name] || svgList["default"]
+  const svg = await icon()
+
+  return svg.default
 }
 
 if (typeof window !== 'undefined') {
-  window.svgList = svgList
-  window.importSvg = importSvg
+  window.ust = window.ust || {}
+  window.ust.options = options
+  window.ust.svgList = svgList
+  window.ust.importSvg = importSvg
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unplugin-svg-transformer",
   "type": "module",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Import easily your SVG with Vite.",
   "author": "kiwilan <[email protected]>",
   "license": "MIT",
@@ -126,12 +126,12 @@
     "unplugin": "^1.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "1.0.0-beta.10",
+    "@antfu/eslint-config": "1.0.0-beta.18",
     "@nuxt/kit": "^3.7.4",
-    "@types/node": "^20.7.0",
+    "@types/node": "^20.8.0",
     "@types/react": "^18.2.23",
     "@vitejs/plugin-vue": "^4.3.4",
-    "@vitest/coverage-v8": "^0.34.5",
+    "@vitest/coverage-v8": "^0.34.6",
     "bumpp": "^9.2.0",
     "chalk": "^5.3.0",
     "eslint": "^8.50.0",
@@ -140,13 +140,13 @@
     "nodemon": "^3.0.1",
     "nuxt": "^3.7.4",
     "react": "^18.2.0",
-    "rimraf": "^5.0.4",
-    "rollup": "^3.29.3",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.4",
     "svelte": "^4.2.1",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vitest": "^0.34.5",
+    "vitest": "^0.34.6",
     "vue": "^3.3.4",
     "webpack": "^5.88.2"
   }