diff --git a/example/components/Logo.svg b/example/components/Logo.svg
new file mode 100644
index 0000000..e18148e
--- /dev/null
+++ b/example/components/Logo.svg
@@ -0,0 +1,16 @@
+<svg 
+  class="NuxtLogo"
+  width="245"
+  height="180"
+  viewBox="0 0 452 342"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+    fill="#00C58E" />
+  <path
+    d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+    fill="#108775" />
+  <path
+  	d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+  	fill="#2F495E" />
+</svg>
\ No newline at end of file
diff --git a/example/pages/index.vue b/example/pages/index.vue
index 5788f5c..9163349 100644
--- a/example/pages/index.vue
+++ b/example/pages/index.vue
@@ -4,6 +4,7 @@
     <ComponentB />
     <ComponentC />
     <hr>
+    <Logo />
     <div>
       Components auto-imported with <a href="https://github.com/nuxt/components" target="_blank">@nuxt/components</a>
     </div>
diff --git a/src/index.ts b/src/index.ts
index 10fc6db..fd680a4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -66,7 +66,8 @@ const componentsModule: Module<Options> = function () {
         console.warn('Components directory not found: `' + dirPath + '`')
       }
 
-      const extensions = dirOptions.extensions || builder.supportedExtensions
+      const supportedExtensions = ['svg', ...builder.supportedExtensions]
+      const extensions = dirOptions.extensions || supportedExtensions
 
       return {
         ...dirOptions,
diff --git a/src/scan.ts b/src/scan.ts
index 94da6da..f00ea48 100644
--- a/src/scan.ts
+++ b/src/scan.ts
@@ -67,6 +67,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise<
       const chunkName = 'components/' + kebabName
 
       let component = {
+        svg: shortPath.endsWith('.svg'),
         filePath,
         pascalName,
         kebabName,
diff --git a/templates/components/index.js b/templates/components/index.js
index fb07b7d..4919527 100644
--- a/templates/components/index.js
+++ b/templates/components/index.js
@@ -1,11 +1,24 @@
 import { wrapFunctional } from './utils'
 
-<%= options.getComponents().map(c => {
+<%
+const rawComponents = options.getComponents()
+const components = []
+const svgs = []
+for (const c of rawComponents) {
+  if (c.svg) {
+    svgs.push(c)
+  } else {
+    components.push(c)
+  }
+}
+%>
+
+<%= components.map(c => {
   const exp = c.pascalName === c.export ? c.pascalName : `${c.export} as ${c.pascalName}`
   return `export { ${exp} } from '../${relativeToBuild(c.filePath)}'`
 }).join('\n') %>
 
-<%= options.getComponents().map(c => {
+<%= components.map(c => {
   const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']`
   return `export const Lazy${c.pascalName} = import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))`
 }).join('\n') %>
diff --git a/templates/components/plugin.js b/templates/components/plugin.js
index c770000..098f70a 100644
--- a/templates/components/plugin.js
+++ b/templates/components/plugin.js
@@ -1,7 +1,18 @@
 import Vue from 'vue'
 import { wrapFunctional } from './utils'
 
-<% const components = options.getComponents() %>
+<%
+const rawComponents = options.getComponents()
+const components = []
+const svgs = []
+for (const c of rawComponents) {
+  if (c.svg) {
+    svgs.push(c)
+  } else {
+    components.push(c)
+  }
+}
+%>
 
 const components = {
 <%= components.map(c => {
@@ -10,7 +21,22 @@ const components = {
 }).join(',\n') %>
 }
 
+const svgs = {}
+
+<% for (const c of svgs) { %>
+svgs[`<%= c.pascalName %>`] = {
+  render (h) {
+    const src = require('../<%= relativeToBuild(c.filePath) %>' /* webpackChunkName: "<%= c.chunkName %>" */)
+    return h('img', { attrs: { src } })
+  }
+}
+<% } %>
+
 for (const name in components) {
   Vue.component(name, components[name])
   Vue.component('Lazy' + name, components[name])
 }
+
+for (const name in svgs) {
+  Vue.component(name, svgs[name])
+}