Docs

Author: visualfanatic

docs/.vuepress/Example.vue

@@ -0,0 +1,50 @@
+<template>
+  <nav>
+    <a href="#" class="btn btn-vue">
+      <VueLogo class="icon" />
+      Vue
+    </a>
+    <a href="#" class="btn btn-svgo">
+      <SVGOIcon class="icon" />
+      SVGO
+    </a>
+    <a href="#" class="btn btn-webpack">
+      <WebpackIcon class="icon" />
+      webpack
+    </a>
+  </nav>
+</template>
+<script>
+import VueLogo from './public/vue.svg';
+import SVGOIcon from './public/svgo.svg';
+import WebpackIcon from './public/webpack.svg';
+
+export default {
+  name: 'Example',
+  components: {
+    VueLogo,
+    SVGOIcon,
+    WebpackIcon,
+  },
+};
+</script>
+<style scoped>
+.btn {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 10px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 2px solid currentColor;
+}
+
+.btn-vue { color: #4fc08d; }
+.btn-svgo { color: #2364c0; }
+.btn-webpack { color: #1d78c1; }
+
+.icon {
+  width: 28px;
+  height: 28px;
+  margin-right: 10px;
+}
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  title: 'Documentation',
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader(require.resolve('../../index'));
+  },
+  themeConfig: {
+    repo: 'visualfanatic/vue-svg-loader',
+    editLinks: true,
+    nav: [
+      {
+        text: 'FAQ',
+        link: '/faq',
+      },
+    ],
+  },
+};

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,12 @@
+import { Tabs, Tab } from 'vue-tabs-component';
+import Logo from './public/logo.svg';
+import Example from './Example';
+
+export default ({
+  Vue,
+}) => {
+  Vue.component('Tabs', Tabs);
+  Vue.component('Tab', Tab);
+  Vue.component('Logo', Logo);
+  Vue.component('Example', Example);
+};

docs/.vuepress/public/logo.svg

@@ -0,0 +1,22 @@
+@import '~@default-theme/styles/config.styl'
+
+.home .hero img
+  max-height 140px
+
+.tabs-component-tabs
+  list-style none
+  display flex
+  padding-left 0
+
+.tabs-component-tab
+  margin-right 25px
+
+.tabs-component-tab-a
+  color desaturate(lighten($textColor, 45%), 10%)
+
+.tabs-component-tab.is-active
+  .tabs-component-tab-a
+    color $accentColor
+
+.tabs-component-panels
+  margin-bottom 40px

docs/.vuepress/public/svgo.svg

@@ -0,0 +1,111 @@
+---
+home: true
+heroText: vue-svg-loader
+heroImage: /logo.svg
+actionText: Example →
+tagline: Use SVG files as Vue components
+actionLink: /#example
+features:
+- title: Easily styleable
+  details: This loader inlines the SVGs which enables you to style aspects like for example stroke/fill color.
+- title: Optimized
+  details: Each SVG you import is optimized on-the-fly using powerful SVGO without you having to do anything.
+- title: SSR ready
+  details: You can import the SVG components inside the code that is going to be rendered on the server side.
+---
+
+## Installation
+
+<Tabs>
+<Tab name="yarn">
+
+``` bash
+yarn add -D vue-svg-loader
+```
+
+</Tab>
+<Tab name="npm">
+
+``` bash
+npm i -D vue-svg-loader
+```
+
+</Tab>
+</Tabs>
+
+## Configuration
+
+<Tabs>
+<Tab name="webpack">
+
+::: warning
+Make sure that your current configuration is not already processing the SVG files.
+Check this [FAQ](/faq#how-to-use-both-inline-and-external-svgs) section if you want to use both inline and external SVGs.
+:::
+
+``` js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        loader: 'vue-svg-loader',
+      },
+    ],
+  },
+};
+```
+
+</Tab>
+<Tab name="Vue CLI">
+
+By default Vue CLI uses the `file-loader` to process the SVG files, you can replace it in `vue.config.js`:
+
+``` js
+module.exports = {
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader');
+  },
+};
+```
+
+</Tab>
+<Tab name="Nuxt.js">
+
+Similarly to Vue CLI, you need to modify existing rule (in `nuxt.config.js`) that processes the SVG files:
+
+``` js
+module.exports = {
+  build: {
+    extend: (config) => {
+      const svgRule = config.module.rules.find(rule => rule.loader === 'url-loader');
+
+      svgRule.test = /\.(png|jpe?g|gif)$/;
+
+      config.module.rules.push({
+        test: /\.svg$/,
+        loader: 'vue-svg-loader',
+      });
+    },
+  },
+};
+```
+
+</Tab>
+</Tabs>
+
+## Example
+
+### Preview
+
+<Example />
+
+### Code
+
+<<< @/docs/.vuepress/Example.vue{4,8,12,18-20,25-27}