From 021469f4bda6a4fc45a564f320cc83f472a0007d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Oct 2021 21:04:02 +0200
Subject: [PATCH 01/18] feat: add css compiler

---
 examples/vite-vue3/App.vue  |  7 +++++++
 src/core/compilers/css.ts   | 20 ++++++++++++++++++++
 src/core/compilers/index.ts |  2 ++
 src/core/svgId.ts           |  3 ++-
 src/index.ts                | 12 +++++++++++-
 src/types.ts                |  2 +-
 6 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/core/compilers/css.ts

diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
index 97d258e1..091544cb 100644
--- a/examples/vite-vue3/App.vue
+++ b/examples/vite-vue3/App.vue
@@ -28,6 +28,11 @@
       <i-inline-foo />
       <i-inline-async />
     </p>
+    <h2>CSS Icons</h2>
+    <p>
+      <span class="mdi-alarm-off"></span>
+      <span class="mdi-account"></span>
+    </p>
     <h2>Collection alias</h2>
     <p>
       <i-park-abnormal />
@@ -40,4 +45,6 @@
 <script setup lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
+import 'virtual:icons/mdi/alarm-off.css'
+import '~icons/mdi/account.css'
 </script>
diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
new file mode 100644
index 00000000..d44ece1a
--- /dev/null
+++ b/src/core/compilers/css.ts
@@ -0,0 +1,20 @@
+// import { ResolvedOptions } from '../../types'
+import { Compiler } from './types'
+
+export const CssCompiler = <Compiler>((
+  svg: string,
+  collection: string,
+  icon: string,
+  // options: ResolvedOptions,
+) => {
+  return `.${collection}-${icon} {
+background: url(data:image/svg+xml;base64,${Buffer.from(svg, 'utf-8').toString('base64')}) no-repeat center;
+background-size: 16px 16px;
+height: 16px;
+opacity: 0.87;
+width: 16px;
+max-width: 16px;
+display: inline-block;
+}
+`
+})
diff --git a/src/core/compilers/index.ts b/src/core/compilers/index.ts
index 0e570327..1742507a 100644
--- a/src/core/compilers/index.ts
+++ b/src/core/compilers/index.ts
@@ -8,8 +8,10 @@ import { Compiler } from './types'
 import { Vue2Compiler } from './vue2'
 import { Vue3Compiler } from './vue3'
 import { WebComponentsCompiler } from './web-components'
+import { CssCompiler } from './css'
 
 export const compilers: Record<ResolvedOptions['compiler'], Compiler> = {
+  'css': CssCompiler,
   'vue2': Vue2Compiler,
   'vue3': Vue3Compiler,
   'solid': SolidCompiler,
diff --git a/src/core/svgId.ts b/src/core/svgId.ts
index 81db1ea9..981e8ced 100644
--- a/src/core/svgId.ts
+++ b/src/core/svgId.ts
@@ -16,7 +16,8 @@ export function handleSVGId(svg: string) {
           return `:id="idMap['${id}']"`
         return full
       })
-      injectScripts = randIdFn + `const idMap = {${Object.values(idMap).join(',')}};`
+    // eslint-disable-next-line prefer-template
+    injectScripts = randIdFn + `const idMap = {${Object.values(idMap).join(',')}};`
   }
 
   return {
diff --git a/src/index.ts b/src/index.ts
index d803e1ad..9b0f70f7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,9 @@ const unplugin = createUnplugin<Options>((options = {}) => {
     enforce: 'pre',
     resolveId(id) {
       if (isIconPath(id)) {
+        if (id.endsWith('.css'))
+          return id
+
         const res = normalizeIconPath(id)
           .replace(/\.\w+$/i, '')
           .replace(/^\//, '')
@@ -26,7 +29,14 @@ const unplugin = createUnplugin<Options>((options = {}) => {
     async load(id) {
       const config = await resolved
       if (isIconPath(id)) {
-        const code = await generateComponentFromPath(id, config) || null
+        let code: string | null = null
+        const css = id.endsWith('.css')
+        if (css)
+          code = await generateComponentFromPath(id, { ...config, compiler: 'css' }) || null
+
+        else
+          code = await generateComponentFromPath(id, config) || null
+
         if (code) {
           return {
             code,
diff --git a/src/types.ts b/src/types.ts
index 9fb19c45..b6adec13 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -57,7 +57,7 @@ export interface Options {
    *
    * @default (detect automatically, fallback to 'vue3')
    */
-  compiler?: 'vue2' | 'vue3' | 'jsx' | 'solid' | 'svelte' | 'web-components' | 'none' | 'raw'
+  compiler?: 'vue2' | 'vue3' | 'jsx' | 'solid' | 'svelte' | 'web-components' | 'none' | 'raw' | 'css'
 
   /**
    * JSX style, works only when compiler set to `jsx`

From 2cc474c114ae2d4ebe7f6b1752079b5672f3cd64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Oct 2021 21:47:10 +0200
Subject: [PATCH 02/18] chore: add options for css fix: add svg xmlns if
 missing on source

---
 src/core/compilers/css.ts | 27 +++++++++++++++++++--------
 src/core/options.ts       |  2 ++
 src/types.ts              | 24 ++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
index d44ece1a..a5af843e 100644
--- a/src/core/compilers/css.ts
+++ b/src/core/compilers/css.ts
@@ -1,20 +1,31 @@
-// import { ResolvedOptions } from '../../types'
+import { ResolvedOptions } from '../../types'
 import { Compiler } from './types'
 
 export const CssCompiler = <Compiler>((
   svg: string,
   collection: string,
   icon: string,
-  // options: ResolvedOptions,
+  options: ResolvedOptions,
 ) => {
+  // we need to add the cvg xml namespace
+  let inlineSvg = svg.includes('xmlns=')
+    ? svg
+    : svg.replace(/"/g, '\'').replace('<svg ', '<svg xmlns=\'http://www.w3.org/2000/svg\' ')
+
+  // we can use svg or base64 encoding
+  inlineSvg = options.css.type === 'base64'
+    ? `base64,${Buffer.from(inlineSvg, 'utf-8').toString('base64')}`
+    : `utf8,${inlineSvg}`
+
+  const scale = options?.css.scale ?? 1
+
   return `.${collection}-${icon} {
-background: url(data:image/svg+xml;base64,${Buffer.from(svg, 'utf-8').toString('base64')}) no-repeat center;
-background-size: 16px 16px;
-height: 16px;
-opacity: 0.87;
-width: 16px;
-max-width: 16px;
+background-image: url("data:image/svg+xml;${inlineSvg}");
+height: ${scale}em;
+width: ${scale}em;
+background-size: ${scale}em ${scale}em;
 display: inline-block;
+${options.css.defaultStyle || ''}
 }
 `
 })
diff --git a/src/core/options.ts b/src/core/options.ts
index 7772655a..197d1218 100644
--- a/src/core/options.ts
+++ b/src/core/options.ts
@@ -14,6 +14,7 @@ export async function resolveOptions(options: Options): Promise<ResolvedOptions>
     jsx = guessJSX(),
     customCollections = {},
     autoInstall = false,
+    css = {},
   } = options
 
   const webComponents = Object.assign({
@@ -33,6 +34,7 @@ export async function resolveOptions(options: Options): Promise<ResolvedOptions>
     jsx,
     webComponents,
     autoInstall,
+    css,
   }
 }
 
diff --git a/src/types.ts b/src/types.ts
index b6adec13..6a87f809 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -82,6 +82,30 @@ export interface Options {
      */
     iconPrefix?: string
   }
+
+  /**
+   * Config for CSS compiler
+   */
+  css?: {
+    /**
+     * How to inline the svg as background image.
+     *
+     * @default 'svg'
+     */
+    type?: 'svg' | 'base64'
+    /**
+     * Scale of icons against 1em
+     *
+     * @default 1.2
+     */
+    scale?: number
+    /**
+     * Style apply to CSS icons by default
+     *
+     * @default ''
+     */
+    defaultStyle?: string
+  }
 }
 
 export interface ResolvedOptions extends Required<Options> {}

From 944659db125fc43cb7bd63666329124c98267b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Oct 2021 21:51:55 +0200
Subject: [PATCH 03/18] chore: add css option on vite-vue3 example fix: use 1.2
 instead 1 as default scale

---
 examples/vite-vue3/vite.config.ts | 3 +++
 src/core/compilers/css.ts         | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/vite-vue3/vite.config.ts b/examples/vite-vue3/vite.config.ts
index cbaa5fca..c2ba9a37 100644
--- a/examples/vite-vue3/vite.config.ts
+++ b/examples/vite-vue3/vite.config.ts
@@ -18,6 +18,9 @@ const config: UserConfig = {
           async: () => fs.readFile('assets/giftbox.svg', 'utf-8'),
         },
       },
+      // css: {
+      //   type: 'base64',
+      // },
     }),
     Components({
       dts: true,
diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
index a5af843e..cb9a149a 100644
--- a/src/core/compilers/css.ts
+++ b/src/core/compilers/css.ts
@@ -17,7 +17,7 @@ export const CssCompiler = <Compiler>((
     ? `base64,${Buffer.from(inlineSvg, 'utf-8').toString('base64')}`
     : `utf8,${inlineSvg}`
 
-  const scale = options?.css.scale ?? 1
+  const scale = options?.css.scale ?? 1.2
 
   return `.${collection}-${icon} {
 background-image: url("data:image/svg+xml;${inlineSvg}");

From 1dcd9c0e5fd6737b1b766a25efb4bbfa59d38314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Oct 2021 21:56:05 +0200
Subject: [PATCH 04/18] chore: css compiler comment wording fix: convert always
 double quotes to single ones

---
 src/core/compilers/css.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
index cb9a149a..b8facc00 100644
--- a/src/core/compilers/css.ts
+++ b/src/core/compilers/css.ts
@@ -7,9 +7,9 @@ export const CssCompiler = <Compiler>((
   icon: string,
   options: ResolvedOptions,
 ) => {
-  // we need to add the cvg xml namespace
-  let inlineSvg = svg.includes('xmlns=')
-    ? svg
+  // we need to add the svg xml namespace
+  let inlineSvg = svg.includes('http://www.w3.org/2000/svg')
+    ? svg.replace(/"/g, '\'')
     : svg.replace(/"/g, '\'').replace('<svg ', '<svg xmlns=\'http://www.w3.org/2000/svg\' ')
 
   // we can use svg or base64 encoding

From 5902ed94d48297546d00d65ade6d666b64d80559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Oct 2021 22:28:41 +0200
Subject: [PATCH 05/18] chore: change default styles name on css option

---
 src/core/compilers/css.ts | 2 +-
 src/types.ts              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
index b8facc00..972691a7 100644
--- a/src/core/compilers/css.ts
+++ b/src/core/compilers/css.ts
@@ -25,7 +25,7 @@ height: ${scale}em;
 width: ${scale}em;
 background-size: ${scale}em ${scale}em;
 display: inline-block;
-${options.css.defaultStyle || ''}
+${options.css.defaultStyles || ''}
 }
 `
 })
diff --git a/src/types.ts b/src/types.ts
index 6a87f809..9210f34f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -100,11 +100,11 @@ export interface Options {
      */
     scale?: number
     /**
-     * Style apply to CSS icons by default
+     * Styles to apply to CSS icons by default
      *
      * @default ''
      */
-    defaultStyle?: string
+    defaultStyles?: string
   }
 }
 

From ee1cfb0f5c00cbe8cb066a2bf54305a5819794cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:27:39 +0200
Subject: [PATCH 06/18] fix(custom): prevent add width and height twice for css
 compiler

---
 src/core/custom.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/core/custom.ts b/src/core/custom.ts
index d19af723..05933c1a 100644
--- a/src/core/custom.ts
+++ b/src/core/custom.ts
@@ -25,8 +25,22 @@ export async function getCustomIcon(
   const scale = options?.scale || 1
 
   if (result) {
-    if (!result.startsWith('<svg '))
+    if (result.startsWith('<svg ')) {
+      // prevent adding width and height twice on css
+      if (options?.compiler === 'css') {
+        const closeSvg = result.indexOf('>')
+        let idx = result.indexOf('width')
+        if (idx > -1 && closeSvg > idx)
+          return result
+        idx = result.indexOf('height')
+        if (idx > -1 && closeSvg > idx)
+          return result
+      }
+      return result.replace('<svg ', `<svg height="${scale}em" width="${scale}em" `)
+    }
+    else {
       console.warn(`Custom icon "${icon}" in "${collection}" is not a valid SVG`)
-    return result.replace('<svg ', `<svg height="${scale}em" width="${scale}em" `)
+      return result
+    }
   }
 }

From 21a35fa39151bc8f27301895dab5975f9b32da15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:27:59 +0200
Subject: [PATCH 07/18] chore: simplify css compiler

---
 src/core/compilers/css.ts | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
index 972691a7..dda336dc 100644
--- a/src/core/compilers/css.ts
+++ b/src/core/compilers/css.ts
@@ -7,23 +7,19 @@ export const CssCompiler = <Compiler>((
   icon: string,
   options: ResolvedOptions,
 ) => {
-  // we need to add the svg xml namespace
-  let inlineSvg = svg.includes('http://www.w3.org/2000/svg')
-    ? svg.replace(/"/g, '\'')
-    : svg.replace(/"/g, '\'').replace('<svg ', '<svg xmlns=\'http://www.w3.org/2000/svg\' ')
+  let inlineSvg = svg.replace(/"/g, '\'')
 
-  // we can use svg or base64 encoding
-  inlineSvg = options.css.type === 'base64'
-    ? `base64,${Buffer.from(inlineSvg, 'utf-8').toString('base64')}`
-    : `utf8,${inlineSvg}`
+  // we need to add the svg xml namespace
+  if (!inlineSvg.includes('http://www.w3.org/2000/svg'))
+    inlineSvg = inlineSvg.replace('<svg ', '<svg xmlns=\'http://www.w3.org/2000/svg\' ')
 
   const scale = options?.css.scale ?? 1.2
 
   return `.${collection}-${icon} {
-background-image: url("data:image/svg+xml;${inlineSvg}");
+background-image: url("data:image/svg+xml;base64,${Buffer.from(inlineSvg, 'utf-8').toString('base64')}");
+background-size: ${scale}em ${scale}em;
 height: ${scale}em;
 width: ${scale}em;
-background-size: ${scale}em ${scale}em;
 display: inline-block;
 ${options.css.defaultStyles || ''}
 }

From 4ec4d7f4cfce0e52168a997c47c7b3b7b6a81464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:28:33 +0200
Subject: [PATCH 08/18] fix: remove type on css option for complex svgs

---
 src/types.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index 9210f34f..f7c84167 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -87,12 +87,6 @@ export interface Options {
    * Config for CSS compiler
    */
   css?: {
-    /**
-     * How to inline the svg as background image.
-     *
-     * @default 'svg'
-     */
-    type?: 'svg' | 'base64'
     /**
      * Scale of icons against 1em
      *

From 1d6349d0351616431cb5123ec861b7b80502ed1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:29:23 +0200
Subject: [PATCH 09/18] chore: remove typs css option from vite-vue3 example
 config

---
 examples/vite-vue3/vite.config.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/examples/vite-vue3/vite.config.ts b/examples/vite-vue3/vite.config.ts
index c2ba9a37..cbaa5fca 100644
--- a/examples/vite-vue3/vite.config.ts
+++ b/examples/vite-vue3/vite.config.ts
@@ -18,9 +18,6 @@ const config: UserConfig = {
           async: () => fs.readFile('assets/giftbox.svg', 'utf-8'),
         },
       },
-      // css: {
-      //   type: 'base64',
-      // },
     }),
     Components({
       dts: true,

From 84f8ff3901d4ef075273f638ebc002e106556a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:30:13 +0200
Subject: [PATCH 10/18] chore: add css icons for custom collections

---
 examples/vite-vue3/App.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
index 091544cb..adf4fafa 100644
--- a/examples/vite-vue3/App.vue
+++ b/examples/vite-vue3/App.vue
@@ -32,6 +32,9 @@
     <p>
       <span class="mdi-alarm-off"></span>
       <span class="mdi-account"></span>
+      <span class="custom-steering-wheel"></span>
+      <span class="icon-park-abnormal"></span>
+      <span class="inline-foo"></span>
     </p>
     <h2>Collection alias</h2>
     <p>
@@ -47,4 +50,7 @@ import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
 import 'virtual:icons/mdi/alarm-off.css'
 import '~icons/mdi/account.css'
+import '~icons/custom/steering-wheel.css'
+import '~icons/icon-park/abnormal.css'
+import '~icons/inline/foo.css'
 </script>

From 311167abd81dbc08dca8d06ffc1dad7278d93a37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:32:01 +0200
Subject: [PATCH 11/18] chore: add `types/css.d.ts`

---
 types/css.d.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 types/css.d.ts

diff --git a/types/css.d.ts b/types/css.d.ts
new file mode 100644
index 00000000..8b590316
--- /dev/null
+++ b/types/css.d.ts
@@ -0,0 +1,9 @@
+declare module 'virtual:icons/*.css' {
+  const css: string
+  export default css
+}
+
+declare module '~icons/*.css' {
+  const css: string
+  export default css
+}

From 945d7382bbd83139e8744e3e5792e647a145ef8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:53:21 +0200
Subject: [PATCH 12/18] chore: more css icons on vite-vue3 and some styling

---
 examples/vite-vue3/App.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
index adf4fafa..1266996c 100644
--- a/examples/vite-vue3/App.vue
+++ b/examples/vite-vue3/App.vue
@@ -30,11 +30,14 @@
     </p>
     <h2>CSS Icons</h2>
     <p>
-      <span class="mdi-alarm-off"></span>
+      <span class="logos-vue"></span>
+      <span class="carbon-app-connectivity"></span>
       <span class="mdi-account"></span>
+      <span class="mdi-alarm-off"></span>
       <span class="custom-steering-wheel"></span>
-      <span class="icon-park-abnormal"></span>
+      <span class="custom-car-a"></span>
       <span class="inline-foo"></span>
+      <span class="inline-async"></span>
     </p>
     <h2>Collection alias</h2>
     <p>
@@ -48,9 +51,18 @@
 <script setup lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
-import 'virtual:icons/mdi/alarm-off.css'
+import '~icons/logos/vue.css'
+import '~icons/carbon/app-connectivity.css'
 import '~icons/mdi/account.css'
+import 'virtual:icons/mdi/alarm-off.css'
 import '~icons/custom/steering-wheel.css'
-import '~icons/icon-park/abnormal.css'
+import '~icons/custom/car-a.css'
 import '~icons/inline/foo.css'
+import '~icons/inline/async.css'
 </script>
+
+<style>
+.logos-vue {
+  font-size: 2em;
+}
+</style>

From 1252269c1ca26a21d23e2b3485895caf9840a373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 00:57:12 +0200
Subject: [PATCH 13/18] chore: add comment to avoid removing
 `virtual:icons/*.css`

---
 examples/vite-vue3/App.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
index 1266996c..eb9e661f 100644
--- a/examples/vite-vue3/App.vue
+++ b/examples/vite-vue3/App.vue
@@ -51,10 +51,11 @@
 <script setup lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
-import '~icons/logos/vue.css'
+// do not change to ~icons/logos/vue.css , for testing purposes
+import 'virtual:icons/logos/vue.css'
 import '~icons/carbon/app-connectivity.css'
 import '~icons/mdi/account.css'
-import 'virtual:icons/mdi/alarm-off.css'
+import '~icons/mdi/alarm-off.css'
 import '~icons/custom/steering-wheel.css'
 import '~icons/custom/car-a.css'
 import '~icons/inline/foo.css'

From ba9875225b324cbe1443b6370d728f35428d1770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 01:12:59 +0200
Subject: [PATCH 14/18] chore: adjust custom logic to check width and the
 height for css compiler

---
 src/core/custom.ts | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/core/custom.ts b/src/core/custom.ts
index 05933c1a..e0488a60 100644
--- a/src/core/custom.ts
+++ b/src/core/custom.ts
@@ -25,22 +25,19 @@ export async function getCustomIcon(
   const scale = options?.scale || 1
 
   if (result) {
-    if (result.startsWith('<svg ')) {
-      // prevent adding width and height twice on css
-      if (options?.compiler === 'css') {
-        const closeSvg = result.indexOf('>')
-        let idx = result.indexOf('width')
-        if (idx > -1 && closeSvg > idx)
-          return result
-        idx = result.indexOf('height')
-        if (idx > -1 && closeSvg > idx)
-          return result
-      }
-      return result.replace('<svg ', `<svg height="${scale}em" width="${scale}em" `)
-    }
-    else {
+    const startSvg = result.indexOf('<svg ')
+    if (startSvg === -1 || startSvg > 0)
       console.warn(`Custom icon "${icon}" in "${collection}" is not a valid SVG`)
-      return result
+    // prevent adding width and height twice on css
+    if (options?.compiler === 'css' && startSvg > -1) {
+      const closeSvg = result.indexOf('>', startSvg + 5)
+      let idx = result.indexOf('width')
+      if (idx > -1 && closeSvg > idx)
+        return result
+      idx = result.indexOf('height', startSvg + 5)
+      if (idx > -1 && closeSvg > idx)
+        return result
     }
+    return result.replace('<svg ', `<svg height="${scale}em" width="${scale}em" `)
   }
 }

From f2e32fd999fb3eb705caa2d4b6b5ac47f0a47e9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 01:23:28 +0200
Subject: [PATCH 15/18] chore(plugin): use css options to override svg options
 when using css compiler

---
 src/index.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 9b0f70f7..9dbf368a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -31,11 +31,19 @@ const unplugin = createUnplugin<Options>((options = {}) => {
       if (isIconPath(id)) {
         let code: string | null = null
         const css = id.endsWith('.css')
-        if (css)
-          code = await generateComponentFromPath(id, { ...config, compiler: 'css' }) || null
-
-        else
+        if (css) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          code = await generateComponentFromPath(id, {
+            ...config,
+            compiler: 'css',
+            scale: options.css?.scale ?? 1.2,
+            defaultStyle: options.css?.defaultStyles || '',
+            defaultClass: '',
+          }) || null
+        }
+        else {
           code = await generateComponentFromPath(id, config) || null
+        }
 
         if (code) {
           return {

From e16269606a8b7603672c4c51ec9223d143f0a9b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 02:05:34 +0200
Subject: [PATCH 16/18] chore: add 1 css icon on examples

---
 examples/sveltekit/src/routes/index.svelte | 2 ++
 examples/vite-preact/src/app.tsx           | 2 ++
 examples/vite-react/src/App.tsx            | 2 ++
 examples/vite-svelte/src/App.svelte        | 2 ++
 examples/vite-vanilla/index.html           | 2 ++
 examples/vite-web-components/index.html    | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/examples/sveltekit/src/routes/index.svelte b/examples/sveltekit/src/routes/index.svelte
index 3c390674..292bc088 100644
--- a/examples/sveltekit/src/routes/index.svelte
+++ b/examples/sveltekit/src/routes/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import 'virtual:icons/logos/svelte-icon.css'
 import SvelteLogo from 'virtual:icons/logos/svelte-icon'
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
@@ -7,6 +8,7 @@ import IconParkAbnormal from 'virtual:icons/icon-park/abnormal'
 
 <main>
   <SvelteLogo style="font-size:2em" />
+  <span class="logos-svelte-icon"></span>
   <br />
   <br />
   <MdiStore24Hour />
diff --git a/examples/vite-preact/src/app.tsx b/examples/vite-preact/src/app.tsx
index 2de44cb5..0d3fc33f 100644
--- a/examples/vite-preact/src/app.tsx
+++ b/examples/vite-preact/src/app.tsx
@@ -1,9 +1,11 @@
+import '~icons/logos/preact.css'
 import Logo from '~icons/logos/preact'
 
 export function App() {
   return (
     <>
       <Logo style={{ fontSize: '3em' }} />
+      <span className="logos-preact" />
       <p>Hello Vite + Preact!</p>
       <p>
         <a
diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
index f1ce0da8..c1fd190f 100644
--- a/examples/vite-react/src/App.tsx
+++ b/examples/vite-react/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import './App.css'
+import '~icons/logos/react.css'
 import ReactLogo from '~icons/logos/react'
 
 function a() {
@@ -13,6 +14,7 @@ function App() {
     <div className="App">
       <header className="App-header">
         <ReactLogo style={{ fontSize: '3em' }} />
+        <span className="logos-react" />
         <p>Hello Vite + React!</p>
         <p>
           <button type="button" onClick={() => setCount(count => count + 1)}>
diff --git a/examples/vite-svelte/src/App.svelte b/examples/vite-svelte/src/App.svelte
index 20bf8a5b..1c090104 100644
--- a/examples/vite-svelte/src/App.svelte
+++ b/examples/vite-svelte/src/App.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import 'virtual:icons/logos/svelte-icon.css'
   import SvelteLogo from 'virtual:icons/logos/svelte-icon'
   import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
   import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
@@ -7,6 +8,7 @@
 
 <main>
   <SvelteLogo style="font-size:2em" />
+  <span class="logos-svelte-icon"></span>
   <br />
   <br />
   <MdiStore24Hour />
diff --git a/examples/vite-vanilla/index.html b/examples/vite-vanilla/index.html
index 17ec8a40..bbdef5ab 100644
--- a/examples/vite-vanilla/index.html
+++ b/examples/vite-vanilla/index.html
@@ -6,7 +6,9 @@
 </head>
 <body>
   <div id="app" style="color: rgb(99, 195, 174)"></div>
+  <span class="mono-icons-layers"></span>
   <script type="module">
+    import '~icons/mono-icons/layers.css'
     import Layer from '~icons/mono-icons/layers'
 
     const root = document.getElementById('app')
diff --git a/examples/vite-web-components/index.html b/examples/vite-web-components/index.html
index 75b9b4f7..2b7c63eb 100644
--- a/examples/vite-web-components/index.html
+++ b/examples/vite-web-components/index.html
@@ -6,10 +6,12 @@
 </head>
 <body>
   <script type="module">
+    import '~icons/mono-icons/layers.css'
     import '~icons/mono-icons/layers'
     import '~icons/ion/logo-web-component'
   </script>
   <icon-mono-icons-layers style="color: rgb(99, 195, 174)" ></icon-mono-icons-layers>
   <icon-ion-logo-web-component style="color: rgb(214, 162, 93)" ></icon-ion-logo-web-component>
+  <span class="mono-icons-layers"></span>
 </body>
 </html>

From 477586e651c345ec0b0cd4e0b21a203c57ac6f20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 02:41:58 +0200
Subject: [PATCH 17/18] docs: add css icons to readme file

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index f72a656c..0edb83a5 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ Access thousands of icons as components **on-demand** universally.
   - 🤹 **Any** icon sets - 100+ popular sets with over 10,000 icons, logos, emojis, etc. Powered by [Iconify](https://github.com/iconify/iconify).
   - 📦 **Major** build tools - Vite, Webpack, Rollup, Nuxt, etc. Powered by [unplugin](https://github.com/unjs/unplugin).
   - 🪜 **Major** frameworks - Vanilla, Web Components, React, Vue 3, Vue 2, Solid, Svelte, and more. [Contribute](./src/core/compiles).
+  - 🗃️ **CSS** icons - Use icons as css stylesheets with or without any framework (experimental).
   - 🍱 **Any** combinations of them!
 - ☁️ On-demand - Only bundle the icons you really use, while having all the options.
 - 🖨 SSR / SSG friendly - Ship the icons with your page, no more FOUC.
@@ -650,6 +651,23 @@ IconsResolver({
 </template>
 ```
 
+### CSS Icons
+
+You can use svg icons as a `css stylesheet` (no framework required):
+```ts
+import '~icons/{collection}/{icon}.css'
+```
+
+then add an `html` element with a `class` with a name following the convention: `{collection}-{icon}`.
+
+For example:
+```html
+<span class="mdi-store" style="font-size: 2em;"></span>
+<script type="module">
+import '~icons/mdi/account.css'
+</script>
+```
+
 ### Collection Aliases
 
 When using component resolver, you have to use the name of the collection that can be long or redundant: for example, 

From ec3e53e6d17366389e2ca7f21c6963fe6e4c5e49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sun, 10 Oct 2021 12:18:37 +0200
Subject: [PATCH 18/18] docs: update class name on css icon example

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0edb83a5..e5280bd9 100644
--- a/README.md
+++ b/README.md
@@ -662,7 +662,7 @@ then add an `html` element with a `class` with a name following the convention:
 
 For example:
 ```html
-<span class="mdi-store" style="font-size: 2em;"></span>
+<span class="mdi-account" style="font-size: 2em;"></span>
 <script type="module">
 import '~icons/mdi/account.css'
 </script>