fix(backtop)

2025-03-13 13:59:04 +08:00 · 2020-02-14 10:07:25 +08:00 · 2020-02-14 10:07:25 +08:00 · f1fb4cb0d7
commit f1fb4cb0d7
parent 4ef4c392eb 80e29fd9cb
4348 changed files with 16187 additions and 13990 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,4 @@
 node_modules
 lib
 test/unit/coverage
-packages/icons
+src/_icons
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -15,4 +15,10 @@ module.exports = {
      }
    ]
  },
+  overrides: [
+    {
+      files: 'src/_icons/**/*',
+      rules: {}
+    }
+  ]
 }
--- a/.gitignore
+++ b/.gitignore
@ -8,5 +8,6 @@ test/unit/coverage
 package-lock.json
 yarn.lock
 lib
+es
 .vscode
 *.swp
--- a/.npmignore
+++ b/.npmignore
@ -1,7 +1 @@
-node_modules
-test/unit/coverage
-build
-demo
-doc
-test
-Dockerfile
+~*
--- a/build/buildIcon.js
+++ b/build/buildIcon.js
@ -0,0 +1,82 @@
+const fs = require('fs')
+const path = require('path')
+const rollup = require('rollup')
+const { plugins, external } = require('../rollup.config')
+
+const iconPath = path.resolve(__dirname, '..', 'src', '_icons')
+const iconNames = fs.readdirSync(iconPath).filter(name => name.endsWith('.vue'))
+
+const iconIndex =
+  `/** Never import this file! It is automatically generated for building icons fast */\n\n` +
+  iconNames.map((iconName, index) => `import $${index} from './${iconName}'`).join('\n') +
+  '\n\nexport default {\n' +
+  iconNames.map((_, index) => `  $${index},`).join('\n') +
+  '\n}'
+
+const iconIndexPath = path.resolve(iconPath, 'index.js')
+
+fs.writeFileSync(
+  iconIndexPath,
+  iconIndex
+)
+
+const cjsIconPath = path.resolve(__dirname, '..', 'lib', 'icons')
+const esmIconPath = path.resolve(__dirname, '..', 'es', 'icons')
+
+function createDirIfNotExists (...args) {
+  if (!fs.existsSync(path.resolve(...args))) {
+    fs.mkdirSync(path.resolve(...args))
+  }
+}
+
+createDirIfNotExists(__dirname, '../lib')
+createDirIfNotExists(__dirname, '../lib', 'icons')
+createDirIfNotExists(__dirname, '../es')
+createDirIfNotExists(__dirname, '../es', 'icons')
+
+;(async () => {
+  const bundle = await rollup
+    .rollup({
+      input: path.resolve(iconPath),
+      preserveModules: true,
+      plugins,
+      external
+    })
+  const vueExtRegex = /\.vue\.js/g
+  const cjsOutputOptions = {
+    format: 'cjs',
+    dir: cjsIconPath
+  }
+  const esmOutputOptions = {
+    format: 'esm',
+    dir: esmIconPath
+  }
+  const { output: cjsOutput } = await bundle.generate(cjsOutputOptions)
+  cjsOutput.forEach((file, index) => {
+    const code = file.code.replace(vueExtRegex, '.js')
+    const fileName = file.fileName.replace(vueExtRegex, '.js')
+    fs.writeFile(
+      path.resolve(cjsIconPath, fileName),
+      code,
+      (err) => {
+        if (err) {
+          console.log(err)
+        }
+      }
+    )
+  })
+  const { output: esmOutput } = await bundle.generate(esmOutputOptions)
+  esmOutput.forEach((file, index) => {
+    const code = file.code.replace(vueExtRegex, '.js')
+    const fileName = file.fileName.replace(vueExtRegex, '.js')
+    fs.writeFile(
+      path.resolve(esmIconPath, fileName),
+      code,
+      (err) => {
+        if (err) {
+          console.log(err)
+        }
+      }
+    )
+  })
+})()
--- a/build/buildStyle.js
+++ b/build/buildStyle.js
@ -0,0 +1,57 @@
+const sass = require('node-sass')
+const fs = require('fs')
+const path = require('path')
+const postcss = require('postcss')
+const postcssConfig = require('../postcss.config')
+const ncp = require('ncp')
+
+const styleFiles = fs
+  .readdirSync(path.resolve(__dirname, '../styles'))
+  .filter(fileName => fileName.endsWith('.scss'))
+
+function createDirIfNotExists (...args) {
+  if (!fs.existsSync(path.resolve(...args))) {
+    fs.mkdirSync(path.resolve(...args))
+  }
+}
+
+createDirIfNotExists(__dirname, '../lib')
+createDirIfNotExists(__dirname, '../lib', 'styles')
+createDirIfNotExists(__dirname, '../lib', 'styles', 'resources')
+createDirIfNotExists(__dirname, '../es')
+createDirIfNotExists(__dirname, '../es', 'styles')
+createDirIfNotExists(__dirname, '../es', 'styles', 'resources')
+
+styleFiles.forEach(fileName => {
+  sass.render({
+    file: path.resolve(__dirname, '../styles', fileName),
+    outputStyle: 'expanded'
+  }, function (err, sassResult) {
+    if (err) console.error(err)
+    postcss(postcssConfig.plugins)
+      .process(sassResult.css, {
+        from: undefined
+      })
+      .then(result => {
+        fs.writeFile(
+          path.resolve(__dirname, '../lib/styles', fileName.replace(/\.scss/, '.css')),
+          result.css,
+          err => {
+            if (err) console.error(err)
+          }
+        )
+        fs.writeFile(
+          path.resolve(__dirname, '../es/styles', fileName.replace(/\.scss/, '.css')),
+          result.css,
+          err => {
+            if (err) console.error(err)
+          }
+        )
+      })
+  })
+})
+
+ncp(
+  path.resolve(__dirname, '../styles/resources'),
+  path.resolve(__dirname, '../lib/styles/resources')
+)
--- a/build/buildcss.js
+++ b/build/buildcss.js
@ -1,31 +0,0 @@
-const sass = require('node-sass')
-const fs = require('fs')
-const path = require('path')
-const postcss = require('postcss')
-const postcssConfig = require('../postcss.config')
-
-const styleFiles = fs
-  .readdirSync(path.resolve(__dirname, '../styles'))
-  .filter(fileName => fileName.endsWith('.scss'))
-
-styleFiles.forEach(fileName => {
-  sass.render({
-    file: path.resolve(__dirname, '../styles', fileName),
-    outputStyle: 'expanded'
-  }, function (err, sassResult) {
-    if (err) console.error(err)
-    postcss(postcssConfig.plugins)
-      .process(sassResult.css, {
-        from: undefined
-      })
-      .then(result => {
-        fs.writeFile(
-          path.resolve(__dirname, '../lib/styles', fileName.replace(/\.scss/, '.css')),
-          result.css,
-          err => {
-            if (err) console.error(err)
-          }
-        )
-      })
-  })
-})
--- a/build/buildjs.js
+++ b/build/buildjs.js
@ -1,2 +0,0 @@
-// const fs = require('fs')
-// const path = require('path')
--- a/build/buildstyle.js
+++ b/build/buildstyle.js
@ -0,0 +1,57 @@
+const sass = require('node-sass')
+const fs = require('fs')
+const path = require('path')
+const postcss = require('postcss')
+const postcssConfig = require('../postcss.config')
+const ncp = require('ncp')
+
+const styleFiles = fs
+  .readdirSync(path.resolve(__dirname, '../styles'))
+  .filter(fileName => fileName.endsWith('.scss'))
+
+function createDirIfNotExists (...args) {
+  if (!fs.existsSync(path.resolve(...args))) {
+    fs.mkdirSync(path.resolve(...args))
+  }
+}
+
+createDirIfNotExists(__dirname, '../lib')
+createDirIfNotExists(__dirname, '../lib', 'styles')
+createDirIfNotExists(__dirname, '../lib', 'styles', 'resources')
+createDirIfNotExists(__dirname, '../es')
+createDirIfNotExists(__dirname, '../es', 'styles')
+createDirIfNotExists(__dirname, '../es', 'styles', 'resources')
+
+styleFiles.forEach(fileName => {
+  sass.render({
+    file: path.resolve(__dirname, '../styles', fileName),
+    outputStyle: 'expanded'
+  }, function (err, sassResult) {
+    if (err) console.error(err)
+    postcss(postcssConfig.plugins)
+      .process(sassResult.css, {
+        from: undefined
+      })
+      .then(result => {
+        fs.writeFile(
+          path.resolve(__dirname, '../lib/styles', fileName.replace(/\.scss/, '.css')),
+          result.css,
+          err => {
+            if (err) console.error(err)
+          }
+        )
+        fs.writeFile(
+          path.resolve(__dirname, '../es/styles', fileName.replace(/\.scss/, '.css')),
+          result.css,
+          err => {
+            if (err) console.error(err)
+          }
+        )
+      })
+  })
+})
+
+ncp(
+  path.resolve(__dirname, '../styles/resources'),
+  path.resolve(__dirname, '../lib/styles/resources')
+)
--- a/build/config.js
+++ b/build/config.js
@ -1,10 +1,8 @@
 const path = require('path')

 exports.alias = {
-  main: path.resolve(__dirname, '../src'),
-  packages: path.resolve(__dirname, '../packages'),
-  examples: path.resolve(__dirname, '../examples'),
-  'naive-ui/lib/icons': path.resolve(__dirname, '../packages/icons')
+  'naive-ui/lib/icons': path.resolve(__dirname, '../lib/icons'),
+  'src': path.resolve(__dirname, '../src')
 }

 exports.docLoaders = [
--- a/build/gulpfile.js
+++ b/build/gulpfile.js
@ -1,30 +0,0 @@
-'use strict'
-
-const { series, src, dest } = require('gulp')
-const sass = require('gulp-sass')
-const autoprefixer = require('gulp-autoprefixer')
-const cssmin = require('gulp-cssmin')
-
-function compile () {
-  return src('../styles/*.scss')
-    .pipe(sass.sync())
-    .pipe(autoprefixer({
-      browsers: ['ie > 9', 'last 2 versions'],
-      cascade: false
-    }))
-    .pipe(dest('../dist/lib/'))
-}
-
-function copyfont () {
-  return src('../styles/resources/**')
-    .pipe(cssmin())
-    .pipe(dest('../dist/lib/resources/'))
-}
-
-function copyicon () {
-  return src('../packages/icons/*.vue')
-    .pipe(cssmin())
-    .pipe(dest('../lib/icons'))
-}
-
-exports.build = series(compile, copyfont, copyicon)
--- a/build/naiveSCSSVarPlugin.js
+++ b/build/naiveSCSSVarPlugin.js
@ -0,0 +1,31 @@
+const sass = require('node-sass')
+const path = require('path')
+
+function createStyleScheme (css) {
+  return css
+    .replace(':export', 'export default')
+    .replace(/:\s/g, `: '`)
+    .replace(/;/g, `',`)
+}
+
+module.exports = function naiveSCSSExportVariable () {
+  return {
+    name: 'naive-scss-export-variable',
+    resolveId (source, importer) {
+      if (source.endsWith('.scss')) {
+        return path.resolve(path.dirname(importer), source)
+      }
+      return null
+    },
+    load (id) {
+      if (id.endsWith('.scss')) {
+        const css = sass.renderSync({
+          file: id,
+          outputStyle: 'expanded'
+        }).css.toString()
+        const styleScheme = createStyleScheme(css)
+        return styleScheme
+      }
+    }
+  }
+}
--- a/build/naiveScssVarPlugin.js
+++ b/build/naiveScssVarPlugin.js
@ -0,0 +1,31 @@
+const sass = require('node-sass')
+const path = require('path')
+
+function createStyleScheme (css) {
+  return css
+    .replace(':export', 'export default')
+    .replace(/:\s/g, `: '`)
+    .replace(/;/g, `',`)
+}
+
+module.exports = function naiveSCSSExportVariable () {
+  return {
+    name: 'naive-scss-export-variable',
+    resolveId (source, importer) {
+      if (source.endsWith('.scss')) {
+        return path.resolve(path.dirname(importer), source)
+      }
+      return null
+    },
+    load (id) {
+      if (id.endsWith('.scss')) {
+        const css = sass.renderSync({
+          file: id,
+          outputStyle: 'expanded'
+        }).css.toString()
+        const styleScheme = createStyleScheme(css)
+        return styleScheme
+      }
+    }
+  }
+}
--- a/build/webpack.demo.js
+++ b/build/webpack.demo.js
@ -9,21 +9,21 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')

 const webpackConfig = {
  mode: 'development',
-  entry: './demo/indexUsingCss.js',
+  entry: './demo/deploymentIndex.js',
  output: {
    path: path.resolve(process.cwd()),
-    publicPath: '',
+    publicPath: '/',
    filename: '[name].[hash:7].js',
    chunkFilename: '[name].[hash:7].js'
  },
  resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.js', '.vue', '.json', '.entry'],
    alias: config.alias,
    modules: ['node_modules']
  },
  devServer: {
    host: '0.0.0.0',
-    port: 8086,
+    port: 8087,
    publicPath: '/',
    hot: true
  },
@ -34,40 +34,12 @@ const webpackConfig = {
    children: false
  },
  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          compilerOptions: {
-            preserveWhitespace: false
-          }
-        }
-      },
-      {
-        test: /\.(js|jsx)$/,
-        exclude: [/node_modules/],
-        loader: 'babel-loader'
-      },
-      {
-        test: /\.(scss|css)$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
-      },
-      {
-        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      }
-    ]
+    rules: config.docLoaders
  },
  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './demo/index.tpl',
-      filename: './index.html'
+      favicon: './demo/assets/images/naivelogo.svg'
    }),
    new VueLoaderPlugin(),
    new webpack.LoaderOptionsPlugin({
--- a/build/webpack.dev.js
+++ b/build/webpack.dev.js
@ -9,7 +9,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')

 const webpackConfig = {
  mode: 'development',
-  entry: './demo/index.js',
+  entry: './demo/devIndex',
  output: {
    path: path.resolve(process.cwd()),
    publicPath: '/',
--- a/build/webpack.doc.js
+++ b/build/webpack.doc.js
@ -10,7 +10,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')

 const webpackConfig = {
  mode: 'production',
-  entry: './demo/index.js',
+  entry: './demo/deploymentIndex.js',
  output: {
    path: path.resolve(__dirname, '..', 'doc', 'dist'),
    publicPath: '/',
--- a/build/webpack.private-doc.js
+++ b/build/webpack.private-doc.js
@ -1,54 +0,0 @@
-/**
- * Webpack config to pack documentation page
- */
-const path = require('path')
-const webpack = require('webpack')
-const config = require('./config')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-
-const webpackConfig = {
-  mode: 'production',
-  // mode: 'development',
-  entry: './demo/privateIndex.js',
-  output: {
-    path: path.resolve(__dirname, '..', 'doc', 'dist'),
-    publicPath: '/',
-    filename: '[name].[hash:7].js',
-    chunkFilename: '[name].[hash:7].js'
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json', '.entry'],
-    alias: config.alias,
-    modules: ['node_modules']
-  },
-  performance: {
-    hints: false
-  },
-  stats: {
-    children: false
-  },
-  module: {
-    rules: config.docLoaders
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './demo/index.tpl',
-      favicon: './demo/assets/images/naivelogo.svg'
-    }),
-    new VueLoaderPlugin(),
-    new webpack.LoaderOptionsPlugin({
-      vue: {
-        compilerOptions: {
-          preserveWhitespace: false
-        }
-      }
-    }),
-    new ExtractTextPlugin('[name].[hash:7].css'),
-    new BundleAnalyzerPlugin()
-  ]
-}
-
-module.exports = webpackConfig
--- a/build/webpack.release.js
+++ b/build/webpack.release.js
@ -1,77 +0,0 @@
-/**
- * Webpack config to test if there is any problem in index.js before release
- */
-const path = require('path')
-const webpack = require('webpack')
-const config = require('./config')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const glob = require('glob')
-
-const entry = {}
-glob.sync('./packages/icons/*.vue').concat('./index.js').forEach(filePath => {
-  const entryName = filePath.replace(/^\.\/packages\//, '').replace(/\.(vue|js)$/, '')
-  entry[entryName] = filePath
-})
-
-const webpackConfig = {
-  mode: 'development',
-  entry,
-  output: {
-    path: path.resolve(process.cwd(), 'lib'),
-    // publicPath: '',
-    filename: '[name].js'
-    // chunkFilename: '[name].js'
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: config.alias,
-    modules: ['node_modules']
-  },
-  performance: {
-    hints: false
-  },
-  stats: {
-    children: false
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          compilerOptions: {
-            preserveWhitespace: false
-          }
-        }
-      },
-      {
-        test: /\.(scss|css)$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'sass-loader'
-        ]
-      },
-      {
-        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new webpack.LoaderOptionsPlugin({
-      vue: {
-        compilerOptions: {
-          preserveWhitespace: false
-        }
-      }
-    })
-  ]
-}
-
-module.exports = webpackConfig
--- a/build/webpack.test-size.js
+++ b/build/webpack.test-size.js
@ -1,53 +0,0 @@
-/**
- * Webpack config to pack documentation page
- */
-const path = require('path')
-const webpack = require('webpack')
-const config = require('./config')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-
-const webpackConfig = {
-  mode: 'production',
-  entry: './test-size/index.js',
-  output: {
-    path: path.resolve(__dirname, '..', 'test-size', 'dist'),
-    publicPath: '/',
-    filename: '[name].[hash:7].js',
-    chunkFilename: '[name].[hash:7].js'
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json', '.entry'],
-    alias: config.alias,
-    modules: ['node_modules']
-  },
-  performance: {
-    hints: false
-  },
-  stats: {
-    children: false
-  },
-  module: {
-    rules: config.docLoaders
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './demo/index.tpl',
-      favicon: './demo/assets/images/naivelogo.svg'
-    }),
-    new VueLoaderPlugin(),
-    new webpack.LoaderOptionsPlugin({
-      vue: {
-        compilerOptions: {
-          preserveWhitespace: false
-        }
-      }
-    }),
-    new ExtractTextPlugin('[name].[hash:7].css'),
-    new BundleAnalyzerPlugin()
-  ]
-}
-
-module.exports = webpackConfig
--- a/build/webpack.test.js
+++ b/build/webpack.test.js
@ -8,7 +8,7 @@ const config = require('./config')
 const webpackConfig = {
  mode: 'development',
  entry: {
-    app: ['./index.js']
+    app: ['./src/index.js']
  },
  output: {
    path: path.resolve(process.cwd(), './dist'),
--- a/demo/deploymentIndex.js
+++ b/demo/deploymentIndex.js
@ -0,0 +1,14 @@
+import { Vue, router, i18n, hljs } from './init'
+import demoRouterView from './demoRouterView'
+import NaiveUI from '../lib/index'
+import '../lib/styles/index.css'
+import './styles/markdown.scss'
+
+Vue.use(NaiveUI)
+NaiveUI.setHljs(hljs)
+
+new Vue({
+  ...demoRouterView,
+  i18n,
+  router
+}).$mount('#app')
--- a/demo/devIndex.js
+++ b/demo/devIndex.js
@ -0,0 +1,15 @@
+
+import { Vue, router, i18n, hljs } from './init'
+import demoRouterView from './demoRouterView'
+import NaiveUI from '../src/index'
+import '../styles/index.scss'
+import './styles/markdown.scss'
+
+Vue.use(NaiveUI)
+NaiveUI.setHljs(hljs)
+
+new Vue({
+  ...demoRouterView,
+  i18n,
+  router
+}).$mount('#app')
--- a/demo/documentation/components/cascader/enUS/index.md
+++ b/demo/documentation/components/cascader/enUS/index.md
@ -27,7 +27,7 @@ filter
 |-|-|-|-|
 |options|`Array<CascaderOption>`|`null`||
 |value|`string \| number`|`null`||
-|placeholder|`string`|`Please Select`||
+|placeholder|`string`|`'Please Select'`||
 |multiple|`boolean`|`false`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |filterable|`boolean`|`false`|Can't be `true` with `remote` prop at same time.|
@ -37,7 +37,7 @@ filter
 |clearable|`boolean`|`false`||
 |remote|`boolean`|`false`||
 |on-load|`(option: CascaderOption, resolve: (children: Array<CascaderOption>) => void) => any`|`() => {}`|Callback when click at unloaded nodes. Pass resolved children to `resolve` function to set children of the node.|
-|splitor|`string`|`'/'`||
+|seperator|`string`|`'/'`||
 |filter|`(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean`|A string based filter.||

 ## Events
--- a/demo/documentation/components/cascader/zhCN/index.md
+++ b/demo/documentation/components/cascader/zhCN/index.md
@ -28,17 +28,17 @@ filter
 |-|-|-|-|
 |options|`Array<CascaderOption>`|`null`||
 |value|`string \| number`|`null`||
-|placeholder|`string`|`请选择`||
+|placeholder|`string`|`'请选择'`||
 |multiple|`boolean`|`false`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
-|filterable|`boolean`|`false`|不能在和 `remote` prop 同时为 `true`|
+|filterable|`boolean`|`false`|不能和 `remote` 同时为 `true`|
 |disabled|`boolean`|`false`||
 |expand-trigger|`'click' \| 'hover'`|`'click'`||
 |leaf-only|`boolean`|`true`||
 |clearable|`boolean`|`false`||
 |remote|`boolean`|`false`||
 |on-load|`(option: CascaderOption, resolve: (children: Array<CascaderOption>) => void) => any`|`() => {}`|在点击未加载完成节点时的回调。把获得的子节点传入 `resolve` 函数来设定这个节点的子节点。|
-|splitor|`string`|`'/'`||
+|seperator|`string`|`'/'`||
 |filter|`(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean`|一个基于字符串的过滤算法||

 ## Events
--- a/demo/documentation/components/datePicker/enUS/date.md
+++ b/demo/documentation/components/datePicker/enUS/date.md
@ -4,8 +4,9 @@
  v-model="timestamp"
  type="date"
  :disabledTime="disabledTime"
+  clearable
 />
-<n-date-picker v-model="timestamp2" type="date" />
+<n-date-picker v-model="timestamp2" type="date" clearable />
 <pre>{{ JSON.stringify(timestamp) }}, {{ JSON.stringify(timestamp2) }}</pre>
 ```
 ```js
--- a/demo/documentation/components/datePicker/enUS/daterange.md
+++ b/demo/documentation/components/datePicker/enUS/daterange.md
@ -3,11 +3,13 @@
 <n-date-picker
  v-model="range1"
  type="daterange"
+  clearable
  :disabledTime="disabledTime"
 />
 <n-date-picker
  v-model="range2"
  type="daterange"
+  clearable
 />
 ```
 ```js
--- a/demo/documentation/components/datePicker/enUS/datetime.md
+++ b/demo/documentation/components/datePicker/enUS/datetime.md
@ -4,8 +4,9 @@
  v-model="timestamp"
  type="datetime"
  :disabledTime= "disabledTime"
+  clearable
 />
-<n-date-picker v-model="timestamp2" type="datetime" />
+<n-date-picker v-model="timestamp2" type="datetime" clearable />
 ```
 ```js
 export default {
--- a/demo/documentation/components/datePicker/enUS/datetimerange.md
+++ b/demo/documentation/components/datePicker/enUS/datetimerange.md
@ -3,10 +3,12 @@
 <n-date-picker
  v-model="range1"
  type="datetimerange"
+  clearable
 />
 <n-date-picker
  v-model="range2"
  type="datetimerange"
+  clearable
 />
 ```
 ```js
@ -21,6 +23,6 @@ export default {
 ```
 ```css
 .n-date-picker {
-  margin: 0 12px 8px 0;
+  margin: 0 0 8px 0;
 }
 ```
--- a/demo/documentation/components/datePicker/enUS/index.md
+++ b/demo/documentation/components/datePicker/enUS/index.md
@ -23,6 +23,7 @@ events
 |-|-|-|-|
 |value|`number`|`null`||
 |actions|`Array<'clear' \| 'now' \| 'confirm'>`|`null`||
+|clearable|`boolean`|`false`||
 |disabled|`boolean`|`false`||
 |type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||

--- a/demo/documentation/components/datePicker/zhCN/date.md
+++ b/demo/documentation/components/datePicker/zhCN/date.md
@ -4,8 +4,9 @@
  v-model="timestamp"
  type="date"
  :disabledTime="disabledTime"
+  clearable
 />
-<n-date-picker v-model="timestamp2" type="date" />
+<n-date-picker v-model="timestamp2" type="date" clearable />
 <pre>{{ JSON.stringify(timestamp) }}, {{ JSON.stringify(timestamp2) }}</pre>
 ```
 ```js
--- a/demo/documentation/components/datePicker/zhCN/daterange.md
+++ b/demo/documentation/components/datePicker/zhCN/daterange.md
@ -3,11 +3,13 @@
 <n-date-picker
  v-model="range1"
  type="daterange"
+  clearable
  :disabledTime="disabledTime"
 />
 <n-date-picker
  v-model="range2"
  type="daterange"
+  clearable
 />
 ```
 ```js
--- a/demo/documentation/components/datePicker/zhCN/datetime.md
+++ b/demo/documentation/components/datePicker/zhCN/datetime.md
@ -4,8 +4,9 @@
  v-model="timestamp"
  type="datetime"
  :disabledTime= "disabledTime"
+  clearable
 />
-<n-date-picker v-model="timestamp2" type="datetime" />
+<n-date-picker v-model="timestamp2" type="datetime" clearable />
 ```
 ```js
 export default {
--- a/demo/documentation/components/datePicker/zhCN/datetimerange.md
+++ b/demo/documentation/components/datePicker/zhCN/datetimerange.md
@ -3,10 +3,12 @@
 <n-date-picker
  v-model="range1"
  type="datetimerange"
+  clearable
 />
 <n-date-picker
  v-model="range2"
  type="datetimerange"
+  clearable
 />
 ```
 ```js
@ -21,6 +23,6 @@ export default {
 ```
 ```css
 .n-date-picker {
-  margin: 0 12px 8px 0;
+  margin: 0 0 8px 0;
 }
 ```
--- a/demo/documentation/components/datePicker/zhCN/index.md
+++ b/demo/documentation/components/datePicker/zhCN/index.md
@ -23,6 +23,7 @@ events
 |-|-|-|-|
 |value|`number`|`null`||
 |actions|`Array<'clear' \| 'now' \| 'confirm'>`|`null`||
+|clearable|`boolean`|`false`||
 |disabled|`boolean`|`false`||
 |type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||

--- a/demo/documentation/components/drawer/zhCN/basic.md
+++ b/demo/documentation/components/drawer/zhCN/basic.md
@ -1,6 +1,6 @@
 # 基础用法
 ```html
-<n-button-group size="small">
+<n-button-group>
  <n-button @click="activate('top')">上</n-button>
  <n-button @click="activate('right')">右</n-button>
  <n-button @click="activate('bottom')">下</n-button>
--- a/demo/documentation/components/icon/enUS/icons.vue
+++ b/demo/documentation/components/icon/enUS/icons.vue
@ -1,11 +1,11 @@
 <template>
  <div>
    <n-input
+      v-model="pattern"
      :style="{
        marginBottom: '24px',
        marginTop: '18px'
      }"
-      v-model="pattern"
      placeholder="Search Icons"
    />
    <div class="icons">
--- a/demo/documentation/components/input/enUS/disabled.md
+++ b/demo/documentation/components/input/enUS/disabled.md
@ -17,7 +17,7 @@ Input can be disabled.
  :disabled="!active"
  round
 />
-<n-input split splitor="to" v-model="value" clearable :disabled="!active">
+<n-input split seperator="to" v-model="value" clearable :disabled="!active">
  <template v-slot:affix>
    <n-icon><ios-calendar /></n-icon>
  </template>
--- a/demo/documentation/components/input/enUS/icon.md
+++ b/demo/documentation/components/input/enUS/icon.md
@ -1,18 +1,16 @@
-# Icon
-Use icon in input.
+# Prefix & Suffix
+Fill content in prefix or suffix of the input.
 ```html
 <n-input v-model="value" placeholder="Search">
-  <template v-slot:affix>
+  <template v-slot:prefix>
    <n-icon>
      <md-search/>
    </n-icon>
  </template>
 </n-input>
-<n-input v-model="value" round placeholder="Search">
-  <template v-slot:affix>
-    <n-icon>
-      <md-search/>
-    </n-icon>
+<n-input v-model="value" round placeholder="1,400,000">
+  <template v-slot:suffix>
+    $
  </template>
 </n-input>
 <n-input v-model="value" round placeholder="Search">
--- a/demo/documentation/components/input/enUS/index.md
+++ b/demo/documentation/components/input/enUS/index.md
@ -7,10 +7,10 @@ size
 round
 icon
 password
-event
 disabled
 clearable
 autosize
+pair
 input-group
 ```
 ## V-model
@ -23,7 +23,8 @@ input-group
 |Name|Type|Default|Description|
 |-|-|-|-|
 |type|`'text' \| 'password' \| 'textarea'`|`'text'`||
-|value|`string \| [string \| null, string \| null]`|`null`||
+|pair|`boolean`|`false`|Whether to input pairwise value.|
+|value|`string \| [string, string]`|`null`|Value of input. When `pair` is `true`, `value` is an array.|
 |disabled|`boolean`|`false`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |rows|`number`|`3`||
@ -33,13 +34,14 @@ input-group
 |clearable|`boolean`|`false`||
 |autosize|`boolean \| { minRows?: number, maxRows?: number }`|`false`||
 |readonly|`boolean`|`false`||
-|placeholder|`string`|`null`||
+|seperator|`string`|`null`|The seperator bewteen pairwise inputs.|
+|placeholder|`string \| [string, string]`|`null`|Placeholder of input. When `pair` is `true`, placeholder is an array.|

 ## Slots
 ### Input Slots
 |Name|Parameters|Description|
 |-|-|-|
-|affix|`()`||
+|prefix|`()`||
 |suffix|`()`||

 ### Input Group Slots
@ -56,7 +58,8 @@ input-group
 ### Input Events
 |Name|Parameters|Description|
 |-|-|-|
-|input|`(value: string)`||
-|change|`(value: string)`||
+|input|`(value: string \| [string, string])`||
+|change|`(value: string \| [string, string])`||
 |blur|`()`||
 |focus|`()`||
+|clear|`()`||
--- a/demo/documentation/components/input/enUS/pair.md
+++ b/demo/documentation/components/input/enUS/pair.md
@ -0,0 +1,43 @@
+# Pairwise Value
+```html
+<n-input
+  pair
+  seperator="-"
+  v-model="value"
+  :placeholder="placeholder"
+  clearable
+  @blur="handleInputBlur"
+  @focus="handleInputFocus"
+  @change="handleInputChange"
+  @input="handleInputInput"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      placeholder: ['From', 'To'],
+      value: [0, 100]
+    }
+  },
+  methods: {
+    handleInputBlur () {
+      this.$NMessage.info('Pairwise Value：Blur')
+    },
+    handleInputFocus () {
+      this.$NMessage.info('Pairwise Value：Focus')
+    },
+    handleInputInput () {
+      this.$NMessage.info('Pairwise Value：Input')
+    },
+    handleInputChange () {
+      this.$NMessage.info('Pairwise Value：Change')
+    }
+  }
+}
+```
+```css
+.n-input {
+  margin-bottom: 8px;
+}
+```
--- a/demo/documentation/components/input/enUS/split.md
+++ b/demo/documentation/components/input/enUS/split.md
@ -1,42 +0,0 @@
-# Pair
-```html
-<n-input pair seperator="to" v-model="value">
-  <template v-slot:affix>
-    <n-icon><ios-calendar /></n-icon>
-  </template>
-</n-input>
-<n-input pair seperator="to" v-model="value">
-  <template v-slot:suffix>
-    <n-icon><ios-calendar /></n-icon>
-  </template>
-</n-input>
-<n-input pair seperator="to" v-model="value" clearable>
-  <template v-slot:suffix>
-    <n-icon><ios-calendar /></n-icon>
-  </template>
-</n-input>
-<n-input pair seperator="to" v-model="value" clearable>
-  <template v-slot:affix>
-    <n-icon><ios-calendar /></n-icon>
-  </template>
-</n-input>
-```
-```js
-import iosCalendar from 'naive-ui/lib/icons/ios-calendar'
-
-export default {
-  components: {
-    iosCalendar
-  },
-  data () {
-    return {
-      value: []
-    }
-  }
-}
-```
-```css
-.n-input {
-  margin-bottom: 8px;
-}
-```
--- a/demo/documentation/components/input/zhCN/disabled.md
+++ b/demo/documentation/components/input/zhCN/disabled.md
@ -17,7 +17,7 @@
  :disabled="!active"
  round
 />
-<n-input split splitor="to" v-model="value" clearable :disabled="!active">
+<n-input split seperator="to" v-model="value" clearable :disabled="!active">
  <template v-slot:affix>
    <n-icon><ios-calendar /></n-icon>
  </template>
--- a/demo/documentation/components/input/zhCN/icon-debug.md
+++ b/demo/documentation/components/input/zhCN/icon-debug.md
@ -0,0 +1,114 @@
+# 图标
+添加图标
+```html
+<n-input v-model="value" placeholder="搜索" clearable>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" placeholder="搜索" clearable>
+  <template v-slot:suffix>
+    DOLLAR
+  </template>
+</n-input>
+<n-input v-model="value" round placeholder="搜索" size="small" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" placeholder="搜索" size="large" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" placeholder="搜索" size="small" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" placeholder="搜索" pair size="large" seperator="-" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" placeholder="搜索" pair size="small" seperator="-" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" round placeholder="搜索" size="large" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+  <template v-slot:prefix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+<n-input v-model="value" round placeholder="搜索" clearable>
+  <template v-slot:suffix>
+    <n-icon>
+      <md-search/>
+    </n-icon>
+  </template>
+</n-input>
+```
+```js
+import mdSearch from 'naive-ui/lib/icons/md-search'
+
+export default {
+  components: {
+    mdSearch
+  },
+  data() {
+    return {
+      value: null
+    }
+  }
+}
+```
+```css
+.n-input {
+  margin-bottom: 8px;
+}
+```
--- a/demo/documentation/components/input/zhCN/icon.md
+++ b/demo/documentation/components/input/zhCN/icon.md
@ -1,18 +1,16 @@
-# 图标
-添加图标
+# 前缀 & 后缀
+在前缀后缀添加内容。
 ```html
 <n-input v-model="value" placeholder="搜索">
-  <template v-slot:affix>
+  <template v-slot:prefix>
    <n-icon>
      <md-search/>
    </n-icon>
  </template>
 </n-input>
-<n-input v-model="value" round placeholder="搜索">
-  <template v-slot:affix>
-    <n-icon>
-      <md-search/>
-    </n-icon>
+<n-input v-model="value" round placeholder="100,000,000">
+  <template v-slot:suffix>
+    元
  </template>
 </n-input>
 <n-input v-model="value" round placeholder="搜索">
--- a/demo/documentation/components/input/zhCN/index.md
+++ b/demo/documentation/components/input/zhCN/index.md
@ -7,10 +7,10 @@ size
 round
 icon
 password
-event
 disabled
 clearable
 autosize
+pair
 input-group
 ```
 ## V-model
@ -23,7 +23,8 @@ input-group
 |名称|类型|默认值|说明|
 |-|-|-|-|
 |type|`'text' \| 'password' \| 'textarea'`|`'text'`||
-|value|`string \| [string \| null, string \| null]`|`null`||
+|pair|`boolean`|`false`|是否输入成对的值|
+|value|`string \| [string, string]`|`null`|文本输入的值。如果是 `pair` 是 `true`，`value` 是一个数组|
 |disabled|`boolean`|`false`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |rows|`number`|`3`||
@ -33,13 +34,14 @@ input-group
 |clearable|`boolean`|`false`||
 |autosize|`boolean \| { minRows?: number, maxRows?: number }`|`false`||
 |readonly|`boolean`|`false`||
-|placeholder|`string`|`null`||
+|seperator|`string`|`null`|成对的值中间的分隔符|
+|placeholder|`string \| [string, string]`|`null`|文本输入的占位符。如果是 `pair` 是 `true`，`placeholder`是一个数组|

 ## Slots
 ### Input Slots
 |属性|类型|说明|
 |-|-|-|
-|affix|`()`||
+|prefix|`()`||
 |suffix|`()`||

 ### Input Group Slots
@ -57,7 +59,8 @@ input-group
 ### Input Events
 |属性|类型|说明|
 |-|-|-|
-|input|`(value: string)`||
-|change|`(value: string)`||
+|input|`(value: string \| [string, string])`||
+|change|`(value: string \| [string, string])`||
 |blur|`()`||
 |focus|`()`||
+|clear|`()`||
--- a/demo/documentation/components/input/zhCN/pair.md
+++ b/demo/documentation/components/input/zhCN/pair.md
@ -0,0 +1,43 @@
+# 输入成对值
+```html
+<n-input
+  pair
+  seperator="-"
+  v-model="value"
+  :placeholder="placeholder"
+  clearable
+  @blur="handleInputBlur"
+  @focus="handleInputFocus"
+  @change="handleInputChange"
+  @input="handleInputInput"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      placeholder: ['从', '到'],
+      value: [0, 100]
+    }
+  },
+  methods: {
+    handleInputBlur () {
+      this.$NMessage.info('输入成对值：Blur')
+    },
+    handleInputFocus () {
+      this.$NMessage.info('输入成对值：Focus')
+    },
+    handleInputInput () {
+      this.$NMessage.info('输入成对值：Input')
+    },
+    handleInputChange () {
+      this.$NMessage.info('输入成对值：Change')
+    }
+  }
+}
+```
+```css
+.n-input {
+  margin-bottom: 8px;
+}
+```
--- a/demo/documentation/components/layout/zhCN/absolute.md
+++ b/demo/documentation/components/layout/zhCN/absolute.md
@ -1,26 +1,26 @@
 # 绝对定位模式
 所有布局组件可以使用 Absolute 定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。

-<n-alert title="警告" type="warning">如果你在 Sider 上设定了 mode=`'absolute'`，那么为了旁边的 Layout 和 Layout Content 正常显示，他们也要被设定为 mode=`'absolute'`</n-alert>
+<n-alert title="注意" type="warning">如果你在 Sider 上设定了 mode=`'absolute'`，那么为了旁边的 Layout 和 Layout Content 正常显示，他们也要被设定为 mode=`'absolute'`</n-alert>
 ```html
 <div style="width: 100%; height: 240px; position: relative">
  <n-layout mode="absolute">
    <n-layout-header style="height: 64px;">
-      Cool Header
+      酷的页头
    </n-layout-header>
    <n-layout mode="absolute" style="top: 64px; bottom: 64px;">
      <n-layout-sider mode="absolute">
-        Cool Sider
+        酷的边栏
      </n-layout-sider>
      <n-layout mode="absolute">
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
      </n-layout>
    </n-layout>
    <n-layout-footer mode="absolute" style="height: 64px">
-      Cool Footer
+      酷的页脚
    </n-layout-footer>
  </n-layout>
 </div>
--- a/demo/documentation/components/layout/zhCN/collapse.md
+++ b/demo/documentation/components/layout/zhCN/collapse.md
@ -6,7 +6,7 @@
 使用 `collapsed-width` 和 `width` 设置侧边栏的宽度。
 ```html
 <n-switch v-model="collapsed" />
-<n-layout style="height: 240px;">
+<n-layout>
  <n-layout-header style="height: 64px;">
    酷的页头
  </n-layout-header>
--- a/demo/documentation/components/popconfirm/zhCN/event.md
+++ b/demo/documentation/components/popconfirm/zhCN/event.md
@ -8,7 +8,7 @@
  <template v-slot:activator>
    <n-button>退出游戏</n-button>
  </template>
-  我看 B 站的时候，听说有些冲钱也是找罪受。
+  我看 B 站的时候，听说有些游戏冲钱也是找罪受。
 </n-popconfirm>
 ```
 ```js
--- a/demo/documentation/components/spin/enUS/wrap.md
+++ b/demo/documentation/components/spin/enUS/wrap.md
@ -4,7 +4,7 @@ You can wrap a component inside spin. To match regular components's size, spin a
 <div
 >
  <n-spin
-    style="display:inline-block"
+    style="display: inline-block; margin: 0 8px 12px 0;"
    size="in-small"
    :spinning="spinning"
  >
@ -13,7 +13,7 @@ You can wrap a component inside spin. To match regular components's size, spin a
    </n-button>
  </n-spin>
  <n-spin
-    style="display:inline-block"
+    style="display: inline-block; margin: 0 8px 12px 0;"
    size="in-medium"
    :spinning="spinning"
  >
@ -22,7 +22,7 @@ You can wrap a component inside spin. To match regular components's size, spin a
    </n-button>
  </n-spin>
  <n-spin
-    style="display:inline-block"
+    style="display: inline-block; margin: 0 8px 12px 0;"
    size="in-large"
    :spinning="spinning"
  >
@ -53,10 +53,6 @@ export default {
 }
 ```
 ```css
-.n-button {
-  margin: 0 8px 12px 0;
-}
-
 .n-alert {
  margin: 0 0 12px 0;
 }
--- a/demo/documentation/components/spin/zhCN/wrap.md
+++ b/demo/documentation/components/spin/zhCN/wrap.md
@ -4,7 +4,7 @@
 <div
 >
  <n-spin
-    style="display:inline-block"
+    style="display: inline-block; margin: 0 8px 12px 0;"
    size="in-small"
    :spinning="spinning"
  >
@ -13,7 +13,7 @@
    </n-button>
  </n-spin>
  <n-spin
-    style="display:inline-block"
+    style="display: inline-block; margin: 0 8px 12px 0;"
    size="in-medium"
    :spinning="spinning"
  >
@ -22,7 +22,7 @@
    </n-button>
  </n-spin>
  <n-spin
-    style="display:inline-block"
+    style="display: inline-block; margin: 0 8px 12px 0;"
    size="in-large"
    :spinning="spinning"
  >
@ -53,10 +53,6 @@ export default {
 }
 ```
 ```css
-.n-button {
-  margin: 0 8px 12px 0;
-}
-
 .n-alert {
  margin: 0 0 12px 0;
 }
--- a/demo/documentation/components/tag/zhCN/index.md
+++ b/demo/documentation/components/tag/zhCN/index.md
@ -11,6 +11,11 @@ checkable
 shape
 ```

+## V-model
+|prop|event|
+|-|-|
+|checked|checked-change|
+
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
--- a/demo/documentation/intro/privateStart/enUS/index.md
+++ b/demo/documentation/intro/privateStart/enUS/index.md
@ -1,19 +0,0 @@
-<!--no-demo-->
-# Getting Started
-
-## Installation
-First install it.
-
-```bash
-npm install --save git+https://github.com/07akioni/naive-ui.git
-```
-
-## Usage
-Add the following lines in you entry point js file.
-
-```js
-import naive from 'naive-ui'
-import 'naive-ui/styles/index.scss'
-
-Vue.use(naive)
-```
--- a/demo/documentation/intro/privateStart/index.entry
+++ b/demo/documentation/intro/privateStart/index.entry
--- a/demo/documentation/intro/privateStart/zhCN/index.md
+++ b/demo/documentation/intro/privateStart/zhCN/index.md
--- a/demo/documentation/intro/start/enUS/index.md
+++ b/demo/documentation/intro/start/enUS/index.md
@ -1,6 +1,8 @@
 <!--no-demo-->
 # Getting Started
-
+```component
+installCodeGenerator
+```
 ## Installation
 First install it.

@ -12,7 +14,14 @@ npm install --save-dev naive-ui
 Add the following lines in you entry point js file.
 ```js
 import naive from 'naive-ui'
-import 'naive-ui/dist/lib/index.css'
+import 'naive-ui/lib/styles/index.css'

 Vue.use(naive)
-```
+```
+
+## Import on Demand
+If you need to import components on demand, you could use the following tool to generate the code.
+
+> What should be noted is the CSS files start with 'Base' are not guaranteed to be stable (I'll try not to change them). Because they are parts of internal implementation of the library. If you find import mistakes after upgrade the package, you may have a look at here. It is possible to pack these common styles inside every component using it. However, compared to add routines when upgrading package, I perfer not to import duplicate codes. (It doesn't mean this is a better solution. It is only a choice.)
+
+<install-code-generator />
--- a/demo/documentation/intro/start/enUS/installCodeGenerator.vue
+++ b/demo/documentation/intro/start/enUS/installCodeGenerator.vue
@ -0,0 +1,99 @@
+<template>
+  <div>
+    <n-card>
+      <n-form>
+        <n-row :gutter="12">
+          <n-form-item-col label="Components to Use" :span="12">
+            <n-select
+              v-model="componentsToImport"
+              placeholder="Components to Use"
+              :options="options"
+              filterable
+              clearable
+              multiple
+            />
+          </n-form-item-col>
+          <n-form-item-col label="Locales" :span="6">
+            <n-select
+              v-model="locales"
+              placeholder="Locales"
+              :options="localeOptions"
+              filterable
+              clearable
+              multiple
+            />
+          </n-form-item-col>
+          <n-form-item-col label="Format" :span="6">
+            <n-select
+              v-model="format"
+              placeholder="Format"
+              :options="formatOptions"
+            />
+          </n-form-item-col>
+        </n-row>
+      </n-form>
+      <n-code :code="code" :language="'js'" />
+    </n-card>
+  </div>
+</template>
+
+<script>
+import {
+  createInstallStatements
+} from 'src/components'
+
+export default {
+  data () {
+    return {
+      components: ['Affix', 'Alert', 'Anchor', 'AutoComplete', 'Avatar', 'BackTop', 'Badge', 'Breadcrumb', 'Button', 'Card', 'Cascader', 'Checkbox', 'Code', 'Collapse', 'ConfigConsumer', 'ConfigProvider', 'Confirm', 'DataTable', 'DatePicker', 'Descriptions', 'Divider', 'Drawer', 'Dropdown', 'Element', 'Empty', 'Form', 'GradientText', 'Grid', 'Icon', 'Input', 'InputNumber', 'Layout', 'List', 'LoadingBar', 'Log', 'Menu', 'Notification', 'Pagination', 'Popconfirm', 'Popover', 'Popselect', 'Progress', 'Radio', 'Result', 'Select', 'Slider', 'Spin', 'Statistic', 'Steps', 'Switch', 'Tabs', 'Tag', 'Thing', 'Time', 'Timeline', 'TimePicker', 'Tooltip', 'Transfer', 'Typography'],
+      localeOptions: [
+        {
+          label: '中文', value: 'zhCN'
+        },
+        {
+          label: 'English', value: 'enUS'
+        }
+      ],
+      locales: ['zhCN', 'enUS'],
+      formatOptions: [
+        {
+          label: 'ES Module',
+          value: 'esm'
+        },
+        {
+          label: 'Common JS',
+          value: 'cjs'
+        }
+      ],
+      format: 'esm',
+      componentsToImport: [
+        'Button'
+      ]
+    }
+  },
+  computed: {
+    code () {
+      return this.createInstallStatements(
+        this.componentsToImport,
+        this.locales,
+        this.format
+      )
+    },
+    options () {
+      return this.components.map(component => ({
+        label: component.replace(/([a-z])([A-Z])/g, '$1 $2'),
+        value: component
+      }))
+    }
+  },
+  methods: {
+    createInstallStatements
+  }
+}
+</script>
+
+<style scoped>
+.n-select {
+  margin: 0 8px 12px 0;
+}
+</style>
--- a/demo/documentation/intro/start/zhCN/index.md
+++ b/demo/documentation/intro/start/zhCN/index.md
@ -1,6 +1,8 @@
 <!--no-demo-->
 # 起步
-
+```component
+installCodeGenerator
+```
 ## 安装
 使用 npm 安装。

@ -12,7 +14,14 @@ npm install --save-dev naive-ui
 在你项目的 javascript 入口文件添加下列代码。
 ```js
 import naive from 'naive-ui'
-import 'naive-ui/dist/lib/index.css'
+import 'naive-ui/lib/styles/index.css'

 Vue.use(naive)
-```
+```
+
+## 按需引入
+如果你需要按需引入组件，可以下面的工具生成按需引入的代码。
+
+> 需要注意的是，以 Base 开头的 CSS 文件并不会确保随着版本的更新保持稳定（我会尽力的保持）。因为它是内部实现的一部分。如果你维持按需引入时升级后样式出现了错误，可以来这里检查一下。虽然把这些公共样式各自打包进每个用到他们的组件是可行的，但是相比于升级的繁琐，我更不喜欢重复的代码。（这不意味着这种解决方案是“更好的”，它只是种选择而已）
+
+<install-code-generator />
--- a/demo/documentation/intro/start/zhCN/installCodeGenerator.vue
+++ b/demo/documentation/intro/start/zhCN/installCodeGenerator.vue
@ -0,0 +1,99 @@
+<template>
+  <div>
+    <n-card>
+      <n-form>
+        <n-row :gutter="12">
+          <n-form-item-col label="导入组件" :span="12">
+            <n-select
+              v-model="componentsToImport"
+              placeholder="导入组件"
+              :options="options"
+              filterable
+              clearable
+              multiple
+            />
+          </n-form-item-col>
+          <n-form-item-col label="导入语言" :span="6">
+            <n-select
+              v-model="locales"
+              placeholder="导入语言"
+              :options="localeOptions"
+              filterable
+              clearable
+              multiple
+            />
+          </n-form-item-col>
+          <n-form-item-col label="导入格式" :span="6">
+            <n-select
+              v-model="format"
+              placeholder="导入格式"
+              :options="formatOptions"
+            />
+          </n-form-item-col>
+        </n-row>
+      </n-form>
+      <n-code :code="code" :language="'js'" />
+    </n-card>
+  </div>
+</template>
+
+<script>
+import {
+  createInstallStatements
+} from 'src/components'
+
+export default {
+  data () {
+    return {
+      components: ['Affix', 'Alert', 'Anchor', 'AutoComplete', 'Avatar', 'BackTop', 'Badge', 'Breadcrumb', 'Button', 'Card', 'Cascader', 'Checkbox', 'Code', 'Collapse', 'ConfigConsumer', 'ConfigProvider', 'Confirm', 'DataTable', 'DatePicker', 'Descriptions', 'Divider', 'Drawer', 'Dropdown', 'Element', 'Empty', 'Form', 'GradientText', 'Grid', 'Icon', 'Input', 'InputNumber', 'Layout', 'List', 'LoadingBar', 'Log', 'Menu', 'Notification', 'Pagination', 'Popconfirm', 'Popover', 'Popselect', 'Progress', 'Radio', 'Result', 'Select', 'Slider', 'Spin', 'Statistic', 'Steps', 'Switch', 'Tabs', 'Tag', 'Thing', 'Time', 'Timeline', 'TimePicker', 'Tooltip', 'Transfer', 'Typography'],
+      localeOptions: [
+        {
+          label: '中文', value: 'zhCN'
+        },
+        {
+          label: 'English', value: 'enUS'
+        }
+      ],
+      locales: ['zhCN', 'enUS'],
+      formatOptions: [
+        {
+          label: 'ES Module',
+          value: 'esm'
+        },
+        {
+          label: 'Common JS',
+          value: 'cjs'
+        }
+      ],
+      format: 'esm',
+      componentsToImport: [
+        'Button'
+      ]
+    }
+  },
+  computed: {
+    code () {
+      return this.createInstallStatements(
+        this.componentsToImport,
+        this.locales,
+        this.format
+      )
+    },
+    options () {
+      return this.components.map(component => ({
+        label: component.replace(/([a-z])([A-Z])/g, '$1 $2'),
+        value: component
+      }))
+    }
+  },
+  methods: {
+    createInstallStatements
+  }
+}
+</script>
+
+<style scoped>
+.n-select {
+  margin: 0 8px 12px 0;
+}
+</style>
--- a/demo/header.vue
+++ b/demo/header.vue
@ -19,7 +19,7 @@
      <img src="./assets/images/naivelogo.svg">
      Naive UI ({{ version }})
    </div>
-    <div style="width: 200px; margin-left: 48px;">
+    <div style="width: 216px; margin-left: 56px;">
      <n-auto-complete
        v-model="searchInputValue"
        :placeholder="$t('searchPlaceholder')"
@ -49,7 +49,7 @@

 <script>
 import { version } from '../package.json'
-import withapp from '../packages/mixins/withapp'
+import withapp from '../src/_mixins/withapp'

 export default {
  mixins: [withapp],
@ -82,12 +82,18 @@ export default {
  },
  computed: {
    searchOptions () {
+      function getLabel (item) {
+        if (item.title) return item.title + (item.titleExtra ? (' ' + item.titleExtra) : '')
+        return item.name
+      }
      if (!this.searchInputValue) return []
+      const replaceRegex = / |-/g
      return this.items.filter(item => {
-        // console.log(item.name.toLowerCase(), this.searchInputValue.toLowerCase())
-        return ~item.name.toLowerCase().indexOf(this.searchInputValue.toLowerCase())
+        const pattern = this.searchInputValue.toLowerCase().replace(replaceRegex, '').slice(0, 20)
+        const label = getLabel(item).toLowerCase().replace(replaceRegex, '')
+        return ~label.indexOf(pattern)
      }).map(item => ({
-        label: item.name,
+        label: getLabel(item),
        value: item.path
      }))
    },
--- a/demo/index.js
+++ b/demo/index.js
@ -1,9 +0,0 @@
-
-import { Vue, router, i18n } from './init'
-import demoRouterView from './demoRouterView'
-
-new Vue({
-  ...demoRouterView,
-  i18n,
-  router
-}).$mount('#app')
--- a/demo/indexUsingCss.js
+++ b/demo/indexUsingCss.js
@ -1,2 +0,0 @@
-import '../dist/lib/index.css'
-import './index.js'
--- a/demo/init.js
+++ b/demo/init.js
@ -1,8 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import '../styles/index.scss'
-import './styles/markdown.scss'
-import NaiveUI from '../index'
 import VueI18n from 'vue-i18n'

 import intro from './documentation/intro/intro'
@ -113,8 +110,6 @@ hljs.registerLanguage('naive-log', () => ({

 Vue.use(VueI18n)
 Vue.use(VueRouter)
-Vue.use(NaiveUI)
-NaiveUI.setHljs(hljs)

 const i18n = new VueI18n({
  locale: 'en-US'
@ -261,4 +256,4 @@ router.afterEach(function (to, from) {
  }
 })

-export { Vue, router, i18n }
+export { Vue, router, i18n, hljs }
--- a/demo/loaders/NaiveUIMdLoader.js
+++ b/demo/loaders/NaiveUIMdLoader.js
@ -2,8 +2,7 @@ const marked = require('marked')
 const createRenderer = require('./mdRenderer')
 const renderer = createRenderer()

-function parseMdAsAnchor (content) {
-  const tokens = marked.lexer(content)
+function parseMdAsAnchor (tokens) {
  const titles = tokens.filter(token => token.type === 'heading' && token.depth === 2).map(token => token.text)
  const linkTags = titles.map(title => {
    const href = title.replace(/ /g, '-')
@ -12,19 +11,45 @@ function parseMdAsAnchor (content) {
  return `<n-anchor :top="24" position="absolute" affix style="width: 132px;">${linkTags.join('\n')}</n-anchor>`
 }

+function parseComponents (tokens) {
+  const componentsIndex = tokens.findIndex(token => token.type === 'code' && token.lang === 'component')
+  let components = []
+  if (~componentsIndex) {
+    components = tokens[componentsIndex].text
+    components = components.split('\n').map(component => component.trim()).filter(component => component.length)
+    tokens.splice(componentsIndex, 1)
+  }
+  return components
+}
+
 module.exports = function (content) {
+  const tokens = marked.lexer(content)
+  const anchor = parseMdAsAnchor(tokens)
+  const components = parseComponents(tokens)
+  const importStatements = components
+    .map(component => `import ${component} from './${component}'`)
+    .join('\n')
  return `<template>
  <component-documentation>
    <div style="display: flex; flex-wrap: nowrap;">
-      <div style="width: calc(100% - 196px); margin-right: 36x;">
-        ${marked(content, {
+      <div style="width: calc(100% - 196px); margin-right: 36px;">
+        ${marked.parser(tokens, {
    renderer
  })}
      </div>
      <div style="width: 160px;">
-        ${parseMdAsAnchor(content)}
+        ${anchor}
      </div>
    </div>
  </component-documentation>
-</template>`
+</template>
+<script>
+${importStatements}
+
+export default {
+  components: {
+    ${components.join(',\n')}
+  }
+}
+</script>`
 }
--- a/demo/privateIndex.js
+++ b/demo/privateIndex.js
@ -1,11 +0,0 @@
-
-import { Vue, router, i18n } from './init'
-import demoRouterView from './demoRouterView'
-
-// if (localStorage.token === 'naive') {
-new Vue({
-  ...demoRouterView,
-  i18n,
-  router
-}).$mount('#app')
-// }
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@ -55,7 +55,7 @@
 </template>

 <script>
-import mdCode from '../../packages/icons/md-code'
+import mdCode from '../../src/_icons/md-code'

 export default {
  components: {
--- a/index.js
+++ b/index.js
@ -1,187 +0,0 @@
-import Card from './packages/common/Card'
-import Icon from './packages/common/Icon'
-import GradientText from './packages/common/GradientText'
-import Table from './packages/common/Table'
-import DataTable from './packages/common/DataTable'
-import CheckBox from './packages/common/Checkbox'
-import RoundButton from './packages/common/Button'
-import Switch from './packages/common/Switch'
-import Select from './packages/common/Select'
-import Cascader from './packages/common/Cascader'
-import CustomInput from './packages/common/CustomInput'
-import Modal from './packages/common/Modal'
-import Input from './packages/common/Input'
-import Message from './packages/common/Message'
-import Notification from './packages/common/Notification'
-import Pagination from './packages/common/Pagination'
-import Progress from './packages/common/Progress'
-import Tooltip from './packages/common/Tooltip'
-import Popup from './packages/common/Popover'
-import Alert from './packages/common/Alert'
-import DatePicker from './packages/common/DatePicker'
-import InputNumber from './packages/common/InputNumber'
-import Radio from './packages/common/Radio'
-import Form from './packages/common/Form'
-import Tabs from './packages/common/Tabs'
-import TimePicker from './packages/common/TimePicker'
-import Layout from './packages/common/Layout'
-import Scrollbar from './packages/common/Scrollbar'
-import Steps from './packages/common/Steps'
-import ConfirmPlugin from './packages/common/Confirm'
-import Badge from './packages/common/Badge'
-import Tag from './packages/common/Tag'
-import BackTop from './packages/common/BackTop'
-import Divider from './packages/common/Divider'
-import Collapse from './packages/common/Collapse'
-import Timeline from './packages/common/Timeline'
-import Popconfirm from './packages/common/Popconfirm'
-import Anchor from './packages/common/Anchor'
-import Dropdown from './packages/common/Dropdown'
-import Popselect from './packages/common/Popselect'
-import ConfigProvider from './packages/common/ConfigProvider'
-import Transfer from './packages/common/Transfer'
-import Spin from './packages/common/Spin'
-import Drawer from './packages/common/Drawer'
-import Time from './packages/common/Time'
-import LoadingBar from './packages/common/LoadingBar'
-import Slider from './packages/common/Slider'
-import Tree from './packages/common/Tree'
-import Grid from './packages/common/Grid'
-import Affix from './packages/common/Affix'
-import Statistic from './packages/common/Statistic'
-import Breadcrumb from './packages/common/Breadcrumb'
-import ConfigConsumer from './packages/common/ConfigConsumer'
-import Descriptions from './packages/common/Descriptions'
-import List from './packages/common/List'
-import Menu from './packages/common/Menu'
-import Avatar from './packages/common/Avatar'
-import Result from './packages/common/Result'
-import Thing from './packages/common/Thing'
-import AutoComplete from './packages/common/AutoComplete'
-import Empty from './packages/common/Empty'
-import Element from './packages/common/Element'
-import Log from './packages/common/Log'
-import Code from './packages/common/Code'
-import Typography from './packages/common/Typography'
-
-import zhCN from './packages/locale/zhCN'
-import enUS from './packages/locale/enUS'
-
-/**
- * Deprecated Components
- */
-import NimbusFormCard from './packages/deprecated/NimbusFormCard'
-import NimbusConfirmCard from './packages/deprecated/NimbusConfirmCard'
-import NimbusServiceLayout from './packages/deprecated/NimbusServiceLayout'
-import NimbusIcon from './packages/deprecated/NimbusIcon'
-
-/**
- * debug usage
- * to be removed
- */
-import Loader from './packages/base/Loading'
-import CancelMark from './packages/base/CancelMark'
-import IconTransition from './packages/transition/IconSwitchTransition'
-
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-const NaiveUI = {
-  install,
-  setHljs,
-  setHighlightjs: setHljs,
-  locales: {
-    'zh-CN': zhCN,
-    'en-US': enUS
-  },
-  fallbackLocale: enUS,
-  addLocale
-}
-
-function addLocale () {
-
-}
-
-function setHljs (hljs) {
-  NaiveUI.hljs = hljs
-}
-
-function install (Vue) {
-  Vue.prototype.$naive = NaiveUI
-  Card.install(Vue)
-  Icon.install(Vue)
-  Loader.install(Vue)
-  Layout.install(Vue)
-  GradientText.install(Vue)
-  Table.install(Vue)
-  DataTable.install(Vue)
-  CheckBox.install(Vue)
-  RoundButton.install(Vue)
-  Switch.install(Vue)
-  Select.install(Vue)
-  Modal.install(Vue)
-  Input.install(Vue)
-  Message.install(Vue)
-  Notification.install(Vue)
-  Pagination.install(Vue)
-  Tooltip.install(Vue)
-  Popup.install(Vue)
-  Alert.install(Vue)
-  DatePicker.install(Vue)
-  InputNumber.install(Vue)
-  Radio.install(Vue)
-  Cascader.install(Vue)
-  CustomInput.install(Vue)
-  Form.install(Vue)
-  Tabs.install(Vue)
-  TimePicker.install(Vue)
-  Scrollbar.install(Vue)
-  Steps.install(Vue)
-  ConfirmPlugin.install(Vue)
-  Progress.install(Vue)
-  Badge.install(Vue)
-  Tag.install(Vue)
-  BackTop.install(Vue)
-  Divider.install(Vue)
-  Collapse.install(Vue)
-  Timeline.install(Vue)
-  Popconfirm.install(Vue)
-  Anchor.install(Vue)
-  Dropdown.install(Vue)
-  Popselect.install(Vue)
-  ConfigProvider.install(Vue)
-  CancelMark.install(Vue)
-  Transfer.install(Vue)
-  Spin.install(Vue)
-  Drawer.install(Vue)
-  LoadingBar.install(Vue)
-  Time.install(Vue)
-  Slider.install(Vue)
-  Tree.install(Vue)
-  Grid.install(Vue)
-  Affix.install(Vue)
-  Statistic.install(Vue)
-  Breadcrumb.install(Vue)
-  ConfigConsumer.install(Vue)
-  Descriptions.install(Vue)
-  List.install(Vue)
-  Menu.install(Vue)
-  Avatar.install(Vue)
-  Result.install(Vue)
-  Thing.install(Vue)
-  AutoComplete.install(Vue)
-  Empty.install(Vue)
-  Element.install(Vue)
-  IconTransition.install(Vue)
-  Log.install(Vue)
-  Code.install(Vue)
-  Typography.install(Vue)
-  /**
-   * Deprecated
-   */
-  NimbusServiceLayout.install(Vue)
-  NimbusConfirmCard.install(Vue)
-  NimbusFormCard.install(Vue)
-  NimbusIcon.install(Vue)
-}
-
-export default NaiveUI
--- a/lib/icons/logo-android.vue
+++ b/lib/icons/logo-android.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M144 268.4V358c0 6.9 4.5 14 11.4 14H184v52c0 13.3 10.7 24 24 24s24-10.7 24-24v-52h49v52c0 7.5 3.4 14.2 8.8 18.6 3.9 3.4 9.1 5.4 14.7 5.4h.5c13.3 0 24-10.7 24-24v-52h27.6c7 0 11.4-7.1 11.4-13.9V192H144v76.4zM408 176c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24v-96c0-13.3-10.7-24-24-24zM104 176c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24v-96c0-13.3-10.7-24-24-24z"/><g><path d="M311.2 89.1l18.5-21.9c.4-.5-.2-1.6-1.3-2.5-1.1-.8-2.4-1-2.7-.4l-19.2 22.8c-13.6-5.4-30.2-8.8-50.6-8.8-20.5-.1-37.2 3.2-50.8 8.5l-19-22.4c-.4-.5-1.6-.4-2.7.4s-1.7 1.8-1.3 2.5l18.3 21.6c-48.2 20.9-55.4 72.2-56.4 87.2h223.6c-.9-15.1-8-65.7-56.4-87zm-104.4 49.8c-7.4 0-13.5-6-13.5-13.3 0-7.3 6-13.3 13.5-13.3 7.4 0 13.5 6 13.5 13.3 0 7.3-6 13.3-13.5 13.3zm98.4 0c-7.4 0-13.5-6-13.5-13.3 0-7.3 6-13.3 13.5-13.3 7.4 0 13.5 6 13.5 13.3 0 7.3-6.1 13.3-13.5 13.3z"/></g></svg></template>
--- a/lib/icons/logo-angular.vue
+++ b/lib/icons/logo-angular.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M213.573 256h84.846l-42.427-89.356z"/><path d="M255.981 32L32 112l46.12 272L256 480l177.75-96L480 112 255.981 32zM344 352l-26.589-56H194.584L168 352h-40L256 72l128 280h-40z"/></svg></template>
--- a/lib/icons/logo-apple.vue
+++ b/lib/icons/logo-apple.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M333.6 153.9c-33.6 0-47.8 16.5-71.2 16.5-24 0-42.3-16.4-71.4-16.4-28.5 0-58.9 17.9-78.2 48.4-27.1 43-22.5 124 21.4 193 15.7 24.7 36.7 52.4 64.2 52.7h.5c23.9 0 31-16.1 63.9-16.3h.5c32.4 0 38.9 16.2 62.7 16.2h.5c27.5-.3 49.6-31 65.3-55.6 11.3-17.7 15.5-26.6 24.2-46.6-63.5-24.8-73.7-117.4-10.9-152.9-19.2-24.7-46.1-39-71.5-39z"/><path d="M326.2 64c-20 1.4-43.3 14.5-57 31.6-12.4 15.5-22.6 38.5-18.6 60.8h1.6c21.3 0 43.1-13.2 55.8-30.1 12.3-16.1 21.6-38.9 18.2-62.3z"/></svg></template>
--- a/lib/icons/logo-bitbucket.vue
+++ b/lib/icons/logo-bitbucket.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M452.9 64.2c-.7-.1-1.5-.2-2.2-.2H61.5c-7.4-.1-13.4 5.9-13.5 13.5 0 .8 0 1.6.2 2.4l56.6 352.5c.7 4.3 2.9 8.2 6.1 11.1 3.2 2.9 7.4 4.5 11.7 4.5H394c6.6.1 12.3-4.8 13.3-11.5L441 224H316l-16 96h-88l-22.3-126.9h256.2l18-113.1c1.1-7.5-3.8-14.6-11-15.8z"/></svg></template>
--- a/lib/icons/logo-bitcoin.vue
+++ b/lib/icons/logo-bitcoin.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.5 279.2c-5-11.5-12.7-21.6-28.1-30.1-8.2-4.5-16.1-7.8-25.4-10 5.4-2.5 10-5.4 16.3-11 7.5-6.6 13.1-15.7 15.6-23.3 2.6-7.5 4.1-18 3.5-28.2-1.1-16.8-4.4-33.1-13.2-44.8-8.8-11.7-21.2-20.7-37.6-27-12.6-4.8-25.5-7.8-45.5-8.9V32h-40v64h-32V32h-41v64H96v48h27.9c8.7 0 14.6.8 17.6 2.3 3.1 1.5 5.3 3.5 6.5 6 1.3 2.5 1.9 8.4 1.9 17.5V343c0 9-.6 14.8-1.9 17.4-1.3 2.6-2 4.9-5.1 6.3-3.1 1.4-3.2 1.3-11.8 1.3h-26.4L96 416h87v64h41v-64h32v64h40v-64.4c26-1.3 44.5-4.7 59.4-10.3 19.3-7.2 34.1-17.7 44.7-31.5 10.6-13.8 14.9-34.9 15.8-51.2.7-14.5-.9-33.2-5.4-43.4zM224 150h32v74h-32v-74zm0 212v-90h32v90h-32zm72-208.1c6 2.5 9.9 7.5 13.8 12.7 4.3 5.7 6.5 13.3 6.5 21.4 0 7.8-2.9 14.5-7.5 20.5-3.8 4.9-6.8 8.3-12.8 11.1v-65.7zm28.8 186.7c-7.8 6.9-12.3 10.1-22.1 13.8-2 .8-4.7 1.4-6.7 1.9v-82.8c5 .8 7.6 1.8 11.3 3.4 7.8 3.3 15.2 6.9 19.8 13.2 4.6 6.3 8 15.6 8 24.7 0 10.9-2.8 19.2-10.3 25.8z"/></svg></template>
--- a/lib/icons/logo-buffer.vue
+++ b/lib/icons/logo-buffer.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M70.7 164.5l169.2 81.7c4.4 2.1 10.3 3.2 16.1 3.2s11.7-1.1 16.1-3.2l169.2-81.7c8.9-4.3 8.9-11.3 0-15.6L272.1 67.2c-4.4-2.1-10.3-3.2-16.1-3.2s-11.7 1.1-16.1 3.2L70.7 148.9c-8.9 4.3-8.9 11.3 0 15.6z"/><path d="M441.3 248.2s-30.9-14.9-35-16.9-5.2-1.9-9.5.1S272 291.6 272 291.6c-4.5 2.1-10.3 3.2-16.1 3.2s-11.7-1.1-16.1-3.2c0 0-117.3-56.6-122.8-59.3-6-2.9-7.7-2.9-13.1-.3l-33.4 16.1c-8.9 4.3-8.9 11.3 0 15.6l169.2 81.7c4.4 2.1 10.3 3.2 16.1 3.2s11.7-1.1 16.1-3.2l169.2-81.7c9.1-4.2 9.1-11.2.2-15.5z"/><path d="M441.3 347.5s-30.9-14.9-35-16.9-5.2-1.9-9.5.1S272.1 391 272.1 391c-4.5 2.1-10.3 3.2-16.1 3.2s-11.7-1.1-16.1-3.2c0 0-117.3-56.6-122.8-59.3-6-2.9-7.7-2.9-13.1-.3l-33.4 16.1c-8.9 4.3-8.9 11.3 0 15.6l169.2 81.7c4.4 2.2 10.3 3.2 16.1 3.2s11.7-1.1 16.1-3.2l169.2-81.7c9-4.3 9-11.3.1-15.6z"/></svg></template>
--- a/lib/icons/logo-chrome.vue
+++ b/lib/icons/logo-chrome.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M188.8 255.925c0 36.946 30.243 67.178 67.2 67.178s67.199-30.231 67.199-67.178c0-36.945-30.242-67.179-67.199-67.179s-67.2 30.234-67.2 67.179z"/><path d="M476.752 217.795c-.009.005-.016.038-.024.042-1.701-9.877-4.04-19.838-6.989-28.838h-.107c2.983 9 5.352 19 7.072 29h-.002c-1.719-10-4.088-20-7.07-29h-155.39c19.044 17 31.358 40.175 31.358 67.052 0 16.796-4.484 31.284-12.314 44.724L231.044 478.452s-.009.264-.014.264l-.01.284h.015l-.005-.262c8.203.92 16.531 1.262 24.97 1.262 6.842 0 13.609-.393 20.299-1.002a223.86 223.86 0 0 0 29.777-4.733C405.68 451.525 480 362.404 480 255.941c0-12.999-1.121-25.753-3.248-38.146z"/><path d="M256 345.496c-33.601 0-61.601-17.91-77.285-44.785L76.006 123.047l-.137-.236a223.516 223.516 0 0 0-25.903 45.123C38.407 194.945 32 224.686 32 255.925c0 62.695 25.784 119.36 67.316 160.009 29.342 28.719 66.545 49.433 108.088 58.619l.029-.051 77.683-134.604c-8.959 3.358-19.031 5.598-29.116 5.598z"/><path d="M91.292 104.575l77.35 133.25C176.483 197.513 212.315 166 256 166h205.172c-6.921-15-15.594-30.324-25.779-43.938.039.021.078.053.117.074C445.644 135.712 454.278 151 461.172 166h.172c-6.884-15-15.514-30.38-25.668-43.99-.115-.06-.229-.168-.342-.257C394.475 67.267 329.359 32 256 32c-26.372 0-51.673 4.569-75.172 12.936-34.615 12.327-65.303 32.917-89.687 59.406l.142.243.009-.01z"/></svg></template>
--- a/lib/icons/logo-closed-captioning.vue
+++ b/lib/icons/logo-closed-captioning.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 96v320h448V96H32zm406 159.8c0 23.4-1.4 41.2-3.3 70.2s-16.8 49.4-51.7 52.6c-34.9 3.2-83.8 3.5-127 3.4-42.9.1-92-.1-127-3.4-34.9-3.2-49.7-23.6-51.7-52.6S74 279.2 74 255.8c0-23.4.1-38.6 3.3-70.2s20.1-49.2 51.7-52.4 86-3.2 127-3.2 95.4 0 127 3.2c31.6 3.2 48.5 20.9 51.7 52.4 3.2 31.6 3.3 46.9 3.3 70.2z"/><path d="M357.5 280.4v.7c0 16.3-10.1 25.9-23.6 25.9-13.5 0-22.6-10.8-23.9-25.9 0 0-1.2-7.9-1.2-23.9s1.4-26 1.4-26c2.4-17 10.7-25.9 24.2-25.9 13.4 0 24.1 11.6 24.1 29.2v.5h45.1c0-21.9-5.5-41.6-16.6-54-11-12.4-27.5-18.6-49.3-18.6-10.9 0-20.9 1.4-30 4.3-9.1 2.9-17 7.9-23.6 15.1-6.6 7.2-11.7 16.8-15.4 28.9-3.6 12.1-5.5 27.3-5.5 45.7 0 18 1.5 33 4.4 45.1 3 12.1 7.3 21.7 13.1 28.9 5.8 7.2 13.1 12.2 21.8 15 8.8 2.8 19.1 4.2 30.9 4.2 25 0 43-6.4 53.8-18.7 10.8-12.3 16.2-30.3 16.2-53.9h-46.1c.2 0 .2 2.5.2 3.4zM202.6 280.4v.7c0 16.3-10.1 25.9-23.6 25.9-13.5 0-22.6-10.8-23.9-25.9 0 0-1.2-7.9-1.2-23.9s1.4-26 1.4-26c2.4-17 10.7-25.9 24.2-25.9 13.4 0 24.1 11.6 24.1 29.2v.5h45.1c0-21.9-5.5-41.6-16.6-54-11-12.4-27.5-18.6-49.3-18.6-10.9 0-20.9 1.4-30 4.3-9.1 2.9-17 7.9-23.6 15.1-6.6 7.2-11.7 16.8-15.4 28.9-3.6 12.1-5.5 27.3-5.5 45.7 0 18 1.5 33 4.4 45.1 3 12.1 7.3 21.7 13.1 28.9 5.8 7.2 13.1 12.2 21.8 15 8.8 2.8 19.1 4.2 30.9 4.2 25 0 43-6.4 53.8-18.7 10.8-12.3 16.2-30.3 16.2-53.9h-46.1c.2 0 .2 2.5.2 3.4z"/></svg></template>
--- a/lib/icons/logo-codepen.vue
+++ b/lib/icons/logo-codepen.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M241.239 303.936c-15.322-10.357-30.742-20.569-46.062-30.93-2.03-1.373-3.43-1.472-5.502-.029l-38.871 26.154C181.966 319.905 244 361.317 244 361.317v-53.786c-.012-1.224-1.553-2.78-2.761-3.595zM195.092 240.666c15.454-10.16 30.851-20.409 46.109-30.86 1.486-1.018 2.775-3.509 2.799-5.334v-51.706s-62.033 41.124-93.262 61.942c13.7 9.159 26.671 17.913 39.787 26.443 1.02.662 3.396.284 4.567-.485zM269.838 209.354a4521.517 4521.517 0 0 0 47.627 31.815c.916.604 2.92.602 3.839 0l39.751-26.467L268 152.484v53.35c.01 1.201.805 2.821 1.838 3.52zM258.109 230.369c-1.21-.802-3.611-.528-4.743.168-4.817 2.962-9.463 6.203-14.164 9.355-8.248 5.53-25.356 17.023-25.356 17.023l38.842 25.865c1.748 1.157 4.436 1.22 6.26.111l39.014-25.993c.001 0-34.079-22.701-39.853-26.529zM141 237.116v39.609l29.622-19.838z"/><path d="M256 32C132.288 32 32 132.288 32 256s100.288 224 224 224 224-100.288 224-224S379.712 32 256 32zm139 265.006c0 5.785-2.652 9.868-7.511 13.094a38019.909 38019.909 0 0 0-123.286 82.188c-5.854 3.918-11.174 3.754-16.984-.137-40.783-27.314-81.719-54.546-122.625-81.676-5.11-3.389-7.594-7.557-7.594-13.73v-79.729c0-6.141 2.521-10.332 7.624-13.716 40.906-27.13 81.939-54.363 122.724-81.676 5.818-3.896 11.094-4.007 16.938-.095a41090.004 41090.004 0 0 0 123.261 82.195c4.678 3.106 7.453 6.943 7.453 12.66v80.622z"/><path d="M316.247 273.234a3826.352 3826.352 0 0 1-45.386 30.332c-2.412 1.588-2.888 3.318-2.861 6.189v51.346l93.039-62.004-38.527-25.882c-2.345-1.604-3.93-1.567-6.265.019zM370 276.676V237.06l-29.59 19.873z"/></svg></template>
--- a/lib/icons/logo-css3.vue
+++ b/lib/icons/logo-css3.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256.282 339.488zM64 32l34.946 403.219L255.767 480l157.259-44.85L448 32H64zm290.676 334.898l-98.607 28.125-98.458-28.248L150.864 289h48.253l3.433 39.562 53.586 15.163.132.273h.034l53.467-14.852L315.381 265H203l-4-50h120.646l4.396-51H140l-4-49h240.58l-21.904 251.898z"/></svg></template>
--- a/lib/icons/logo-designernews.vue
+++ b/lib/icons/logo-designernews.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M290.4 145L227 96l63.6 102.2z"/><path d="M329 96v163h-36.4l-63.2-98.6 1.7 98.6H191V152l-37.3-29.3c1 1.2 2 2.4 2.9 3.7 10 13.9 15 30.5 15 50.5 0 49.2-30.6 82.1-76.9 82.1H32v.4L231.6 416H480V214.1L329 96z"/><path d="M129.9 178.1c0-29-14.2-45.1-39.7-45.1H71v89h19c26 0 39.9-15.4 39.9-43.9z"/></svg></template>
--- a/lib/icons/logo-dribbble.vue
+++ b/lib/icons/logo-dribbble.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 64C150 64 64 150 64 256c0 106.1 86 192 192 192s192-85.9 192-192c0-106-86-192-192-192zm121.9 88.5c21.6 25.4 35.3 57.6 37.7 92.9-34.6-1.8-76-1.8-109.2 1.3-4.2-10.6-8.5-21-13.2-31 38.3-16.6 67.8-38.4 84.7-63.2zM256 96c38.8 0 74.4 13.8 102.1 36.8-17.4 22-44.7 41.1-78.7 55.6-18.6-34.4-40-64-62.8-87.3 12.7-3.2 25.8-5.1 39.4-5.1zm-72.4 17.5c23.1 23 44.8 52.3 63.8 86.6-36.1 11-77.5 17.3-121.7 17.3-8.4 0-16.6-.3-24.7-.8 11.5-45.1 42-82.5 82.6-103.1zM96.3 248.4c9.1.4 18.3.6 27.6.5 50.4-.6 97.3-8.5 137.6-21.4 3.8 7.9 7.4 16 10.8 24.3-5.5 1.3-10.4 2.7-14.3 4.3-55.1 23.1-98.5 60.4-122 105.5-24.8-28.2-40-65.1-40-105.6 0-2.6.1-5.1.3-7.6zM256 416c-37 0-71-12.6-98.1-33.7 21.3-42.2 59.3-77.1 107.2-98.8 4.5-2.1 10.5-3.8 17.4-5.3 5.7 15.8 10.8 32.2 15.3 49.2 6.9 26.5 11.8 52.7 14.8 78.1C295 412.2 276 416 256 416zm86.5-25.5c-3-25.7-7.9-52.1-14.9-78.9-3.4-13-7.3-25.6-11.5-37.9 31.4-2.6 69-2.2 98.9 0-5.4 49.1-33 91.3-72.5 116.8z"/></svg></template>
--- a/lib/icons/logo-dropbox.vue
+++ b/lib/icons/logo-dropbox.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M177 77L64 150.9l78.1 62.7L256 143.1zM64 276.3l113 73.9 79-66.1-113.9-70.5zM256 284.1l79 66.1 113-73.9-78.1-62.7zM448 150.9L335 77l-79 66.1 113.9 70.5z"/><path d="M256.2 298.3l-79.8 66-34.4-22.2V367l114 68 114-68v-24.9l-34.2 22.2z"/></svg></template>
--- a/lib/icons/logo-euro.vue
+++ b/lib/icons/logo-euro.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M234 272v-48h131.094l7.149-48H234v-1.83c0-35.92 14.975-58.086 79.25-58.086 26.264 0 55.867 2.498 93.189 8.742L416 59.866C377.988 51.123 345.306 48 310.057 48 195.326 48 146 89.225 146 165.43V176H96v48h50v48H96v48h50v26.57C146 422.774 195.297 464 310.027 464c35.25 0 67.848-3.123 105.859-11.866l-9.619-64.96c-37.322 6.244-66.781 8.742-93.045 8.742-64.276 0-79.223-18.739-79.223-63.086V320h116.795l7.148-48H234z"/></svg></template>
--- a/lib/icons/logo-facebook.vue
+++ b/lib/icons/logo-facebook.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/></svg></template>
--- a/lib/icons/logo-flickr.vue
+++ b/lib/icons/logo-flickr.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M352 64H160c-52.8 0-96 43.2-96 96v192c0 52.8 43.2 96 96 96h192c52.8 0 96-43.2 96-96V160c0-52.8-43.2-96-96-96zM184 304c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm144 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"/></svg></template>
--- a/lib/icons/logo-foursquare.vue
+++ b/lib/icons/logo-foursquare.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M376.764 32H138.541C105.666 32 96 56.798 96 72.414v379.64c0 17.591 9.425 24.117 14.718 26.267 5.299 2.155 19.916 3.971 28.673-6.168 0 0 112.469-130.895 114.4-132.834 2.921-2.93 2.921-2.93 5.844-2.93h72.767c30.574 0 35.49-21.869 38.684-34.752 2.659-10.789 32.489-163.962 42.452-212.559C421.143 51.993 411.745 32 376.764 32zm-5.678 269.637c2.659-10.789 32.489-163.962 42.452-212.559m-50.846 7.592l-9.999 51.734c-1.195 5.65-8.287 11.595-14.863 11.595h-95.917C231.473 160 224 166.138 224 176.602v13.448c0 10.473 7.519 17.894 17.965 17.894h81.848c7.374 0 14.61 8.109 13.016 16.005-1.602 7.908-9.086 46.569-9.984 50.89-.902 4.328-5.845 11.725-14.611 11.725h-64.269c-11.705 0-15.244 1.533-23.074 11.293-7.837 9.77-78.256 94.592-78.256 94.592-.713.822-1.41.584-1.41-.312V95.896c0-6.684 5.793-14.523 14.479-14.523h191.173c7.035-.001 13.611 6.631 11.815 15.297z"/></svg></template>
--- a/lib/icons/logo-github.vue
+++ b/lib/icons/logo-github.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/></svg></template>
--- a/lib/icons/logo-google.vue
+++ b/lib/icons/logo-google.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M457.6 224l-2.1-8.9H262V297h115.6c-12 57-67.7 87-113.2 87-33.1 0-68-13.9-91.1-36.3-23.7-23-38.8-56.9-38.8-91.8 0-34.5 15.5-69 38.1-91.7 22.5-22.6 56.6-35.4 90.5-35.4 38.8 0 66.6 20.6 77 30l58.2-57.9c-17.1-15-64-52.8-137.1-52.8-56.4 0-110.5 21.6-150 61C72.2 147.9 52 204 52 256s19.1 105.4 56.9 144.5c40.4 41.7 97.6 63.5 156.5 63.5 53.6 0 104.4-21 140.6-59.1 35.6-37.5 54-89.4 54-143.8 0-22.9-2.3-36.5-2.4-37.1z"/></svg></template>
--- a/lib/icons/logo-hackernews.vue
+++ b/lib/icons/logo-hackernews.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 64v384h384V64H64zm214 215v72h-40v-72l-66-120h47.1l39.7 83.6 38-83.6H342l-64 120z"/></svg></template>
--- a/lib/icons/logo-html5.vue
+++ b/lib/icons/logo-html5.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32l34.936 403.213L255.769 480l157.245-44.854L448 32H64zm307.997 132h-184l3.991 51h176.008l-13.505 151.386-98.5 28.094-98.682-27.976L150.545 289h48.254l3.423 39.287 53.769 14.781 53.422-14.915L314.987 264H147.986l-12.571-149.589 240.789.016L371.997 164z"/></svg></template>
--- a/lib/icons/logo-instagram.vue
+++ b/lib/icons/logo-instagram.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336 96c21.2 0 41.3 8.4 56.5 23.5S416 154.8 416 176v160c0 21.2-8.4 41.3-23.5 56.5S357.2 416 336 416H176c-21.2 0-41.3-8.4-56.5-23.5S96 357.2 96 336V176c0-21.2 8.4-41.3 23.5-56.5S154.8 96 176 96h160m0-32H176c-61.6 0-112 50.4-112 112v160c0 61.6 50.4 112 112 112h160c61.6 0 112-50.4 112-112V176c0-61.6-50.4-112-112-112z"/><path d="M360 176c-13.3 0-24-10.7-24-24s10.7-24 24-24c13.2 0 24 10.7 24 24s-10.8 24-24 24zM256 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64m0-32c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z"/></svg></template>
--- a/lib/icons/logo-ionic.vue
+++ b/lib/icons/logo-ionic.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 161.2c-52.3 0-94.8 42.5-94.8 94.8s42.5 94.8 94.8 94.8 94.8-42.5 94.8-94.8-42.5-94.8-94.8-94.8z"/><circle cx="392.1" cy="126.4" r="43.2"/><path d="M445.3 169.8l-1.8-4-2.9 3.3c-7.1 8-16.1 14.2-26.1 17.9l-2.8 1 1.1 2.7c8.6 20.7 13 42.7 13 65.2 0 93.7-76.2 169.9-169.9 169.9S86.1 349.7 86.1 256 162.3 86.1 256 86.1c25.4 0 49.9 5.5 72.8 16.4l2.7 1.3 1.2-2.7c4.2-9.8 10.8-18.5 19.2-25.2l3.4-2.7-3.9-2C321.6 55.8 289.5 48 256 48 141.3 48 48 141.3 48 256s93.3 208 208 208 208-93.3 208-208c0-30-6.3-59-18.7-86.2z"/></svg></template>
--- a/lib/icons/logo-ionitron.vue
+++ b/lib/icons/logo-ionitron.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M468.4 269.2c-2.7-34.2-12.2-59.2-32.9-57.3 6.4 14.6 12.2 48.1 8.7 72-1.4-25.9-6.3-50.2-17.2-72-32.1-64.6-100.6-107.4-177.5-103.1-85.9 4.8-155 66.7-172 146.8l-11.4 1.6c-17.2 2.4-26.9 34.9-21.7 72.5 5.3 37.7 23.5 66.2 40.7 63.8l15.8-2.2c34.7 56.3 98.5 92.3 169.3 88.4 85.3-4.7 154-65.9 171.7-145.2l7.4-.4c15.2-2.5 21.8-31.2 19.1-64.9zM90.3 264c10.7 8.2 25.4 28.3 29.1 55.1 3.9 27.7-4.8 54.1-13.4 64.3 6-14.8 8.1-37.3 4.7-61.9-3.3-24-11-44.7-20.4-57.5zm183.8 116.2c-8.5.5-15.8-6-16.3-14.5s6-15.7 14.6-16.2c8.5-.5 15.8 6 16.3 14.5s-6.1 15.7-14.6 16.2zm81-4.7c-8.5.5-15.8-6-16.3-14.5s6-15.7 14.6-16.2c8.5-.5 15.8 6 16.3 14.5.4 8.5-6.1 15.8-14.6 16.2zM165.5 70s0 .1 0 0c.1.1.1.2.1.2.1.2.2.3.3.5v.1c.4 1 1.1 1.9 2.3 2.7 2 1.5 5 2.4 8.6 3 3.4.5 7.5.7 11.9.5 1 0 1.9-.1 2.9-.2-.4-.4-.8-.9-1.2-1.3h-1.3c-4.3.1-8.2-.2-11.6-.9-3.5-.7-6.4-1.8-8.4-3.4-.6-.5-1-.9-1.4-1.4-.2-.7-.2-1.5 0-2.3.5-2.3 2.4-4.8 5.5-7.4 2.7-2.3 6.4-4.7 10.9-7 .9-.4 1.7-.9 2.6-1.3.1-.1.3-.1.5-.2-.8 3.3-.9 6.9-.2 10.5 2.3 11.9 11.6 20.3 23.2 20.6l4 24.3 12.7-2-4-24.3c10.8-4.6 16.3-16.1 14-28-.7-3.5-2-6.7-3.9-9.5-5.3-.8-15.6-.8-29.2 2.1 1.1-.3 2.1-.7 3.2-1 7.6-2.1 14.9-3.5 21.5-4.2.6-.1 1.2-.1 1.8-.2 1.2-.1 2.4-.2 3.5-.3h.6c4.1-.2 7.7-.1 10.8.3 2.4.3 4.4.8 6.1 1.4-.6.9-.9 2-.9 3.2 0 2.7 1.8 5 4.3 5.8-.6.9-1.3 1.9-2.1 2.8-.8.9-1.8 1.9-2.9 2.8-1.1.9-2.3 1.8-3.5 2.7l-6.5 3.8-.3 1.5c.1 0 .2-.1.2-.1l8.4-4.7c1.2-.8 2.4-1.6 3.4-2.4 1.2-.9 2.2-1.8 3.2-2.8.9-.9 1.7-1.9 2.4-2.8l.3-.6c3-.4 5.4-2.9 5.4-6 0-3.4-2.7-6.1-6.1-6.1-1 0-1.9.3-2.8.7-2-1.2-4.8-2.1-8.2-2.7-4.3-.8-9.6-1-15.5-.6-.7 0-1.4.1-2.1.2-.7.1-1.3.2-2 .2-5.3-3.5-11.9-5-18.7-3.7-7.9 1.5-14.2 6.5-17.8 13-1.3.5-2.6 1.1-3.8 1.7-.7.3-1.3.6-2 .9-5.9 2.9-10.6 6.1-13.9 9.1-3.1 2.9-4.9 5.7-5.3 8.3-.2 1.4 0 2.8.7 4 .1.1.2.3.3.5z"/></svg></template>
--- a/lib/icons/logo-javascript.vue
+++ b/lib/icons/logo-javascript.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 88.001h-80v212.498c0 52.58-18.032 67.261-49.412 67.261-14.705 0-27.948-2.521-38.25-6.063L32 423.904C46.7 428.966 69.259 432 86.907 432 158.955 432 208 398.129 208 301.02V88.001zM382.463 80C305.02 80 256 123.998 256 182.154c0 50.083 37.751 81.44 92.641 101.665 39.7 14.158 55.392 26.808 55.392 47.539 0 22.756-18.139 37.425-52.448 37.425-31.863 0-60.789-10.64-80.394-21.255v-.021L256 410.727c18.639 10.638 53.441 21.255 91.167 21.255C437.854 431.98 480 383.43 480 326.284c0-48.55-26.958-79.9-85.278-102.163-43.139-17.191-61.27-26.795-61.27-48.542 0-17.2 15.688-32.869 48.043-32.869 31.846 0 53.744 10.707 66.505 17.291l19.125-64C447.125 87.22 420.188 80 382.463 80z"/></svg></template>
--- a/lib/icons/logo-linkedin.vue
+++ b/lib/icons/logo-linkedin.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/></svg></template>
--- a/lib/icons/logo-markdown.vue
+++ b/lib/icons/logo-markdown.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M447.659 96H64.341C46.504 96 32 110.484 32 128.308v255.349C32 401.493 46.504 416 64.341 416h383.318C465.496 416 480 401.493 480 383.656V128.308C480 110.484 465.496 96 447.659 96zM284.023 352h-56.048v-96l-42.04 53.878L143.913 256v96H87.869V160h56.044l42.022 67.98 42.04-67.98h56.048v192zm83.657 0l-69.635-96h42v-96h56.043v96h42.027l-70.453 96h.018z"/></svg></template>
--- a/lib/icons/logo-no-smoking.vue
+++ b/lib/icons/logo-no-smoking.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M360 256h16v48h-16zM112 304h129.6l-48-48H112z"/><path d="M364.5 60.1c-.4-.2-.7-.4-1-.6-10.9-6-22.5-10.7-34.4-14.8l-5.4-1.8C302.3 36.1 279.6 32 256 32 132.3 32 32 132.3 32 256c0 84.3 46.6 157.6 115.4 195.8.4.2.7.5 1.1.7 10.9 6 22.5 10.7 34.4 14.8l5.4 1.8c21.4 6.8 44 10.9 67.7 10.9 123.7 0 224-100.3 224-224 0-84.3-46.6-157.7-115.5-195.9zM256 426.4c-9.3 0-18.4-.9-27.2-2.4-9.8-1.6-19.3-4.1-28.5-7.3-1.9-.6-3.8-1.2-5.6-1.9-6.5-2.5-12.9-5.3-19-8.6-53.6-28.7-90.1-85.2-90.1-150.3 0-37.2 12.4-71.4 32.7-99.4l237.2 237.2c-28.1 20.3-62.3 32.7-99.5 32.7zm137.8-71L156.6 118.2c28-20.2 62.1-32.6 99.4-32.6 9.3 0 18.3.9 27.2 2.4 9.8 1.6 19.3 4.1 28.5 7.3 1.8.6 3.7 1.2 5.6 1.9 6.2 2.4 12.2 5 18 8.1 54.2 28.5 91.2 85.3 91.2 150.8-.1 37.2-12.5 71.3-32.7 99.3z"/><path d="M352 256h-34l34 34zM384 256h16v48h-16zM360.1 212.7c-8.8-4.1-22-5.7-45.6-5.7h-3.6c-12.7.1-15.9-.1-20-6.1-2.8-4.2-1-14.8 3.7-21.9 1.6-2.4 1.8-5.6.4-8.2-1.4-2.6-4.1-4.2-7-4.3-.1 0-9.4-.1-18.3-3.9-10.6-4.5-15.6-12.1-15.6-23.1 0-25.8 21.8-27.7 22.8-27.7v-16c-12 0-38.8 11-38.8 43.7 0 17.5 9 31 25.7 38 4.2 1.7 8.4 2.9 12 3.6-3.3 9.8-3.6 20.9 1.7 28.7 9 13.3 20.3 13.2 33.3 13.1h3.5c26.3 0 34.6 2.3 38.9 4.3 5.7 2.6 6.8 7.5 6.6 15.7v1h16v-1c0-7.1.3-22.8-15.7-30.2z"/><path d="M400 244c0-25.7-3-39.2-9.1-49.6C382.3 180 368.5 172 352 172h-17.4c2.9-8.3 5.4-19.8 3.5-30.9-3.2-18.8-19.1-30-43.1-30v16c21 0 26.1 9.1 27.4 16.7 2.5 14.5-6.8 32.1-6.9 32.3-1.4 2.5-1.3 5.5.1 7.9s4.1 3.9 6.9 3.9H352c10.9 0 19.4 4.9 25.1 14.6 3.1 5.3 6.9 13.5 6.9 41.4h16v.1z"/></svg></template>
--- a/lib/icons/logo-nodejs.vue
+++ b/lib/icons/logo-nodejs.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M255.917 480a32.536 32.536 0 0 1-16.633-4.599l-52.985-32.44c-7.914-4.562-4.023-6.203-1.443-7.141 10.565-3.781 13.713-5.657 24.947-12.285 1.206-.667 2.747-.424 3.955.322l39.71 23.504c1.476.85 3.557.85 4.931 0l155.188-92.246c1.475-.877 2.415-2.646 2.415-4.441V163.869c0-1.85-.94-3.592-2.449-4.528l-155.12-94.672c-1.478-.894-3.421-.894-4.898 0L98.516 159.374c-1.544.903-2.516 2.698-2.516 4.495v186.805c0 1.813.972 3.513 2.481 4.389l39.929 23.972c23.61 12.204 37.59-.17 37.59-14.611V180.725c0-2.652 2.047-4.727 4.596-4.727h22.809c2.515 0 4.597 2.072 4.597 4.727v183.698c0 32.563-19.353 51.248-49.199 51.248-9.156 0-16.397 0-36.552-10.279l-41.584-24.781C70.371 374.459 64 362.965 64 350.656V161.191c0-12.316 6.371-23.784 16.665-29.917L239.35 36.41c10.027-5.88 23.374-5.88 33.332 0l158.65 94.864C441.63 137.423 448 148.899 448 161.191v189.465c0 12.309-6.37 23.75-16.668 29.953l-158.65 94.774a32.52 32.52 0 0 1-16.698 4.599l-.067.018z"/><path d="M304.943 351.998c-64.61 0-84.006-31.61-84.006-59.271 0-2.629 2.048-4.729 4.562-4.729h20.521c2.282 0 4.227 1.7 4.562 4.016 3.084 21.602 16.748 31.15 54.324 31.15 33.399 0 47.091-10.346 47.091-28.684 0-10.592-3.463-18.424-55.407-23.697-43.427-4.441-70.288-14.373-70.288-50.295 0-33.135 26.996-52.49 72.234-52.49 46.128 0 76.462 14 79.173 50.829.102 1.337-.368 2.629-1.241 3.644-.871.965-2.078 1.527-3.353 1.527h-20.591c-2.146 0-4.024-1.562-4.459-3.713-4.401-16.953-16.97-23.402-49.563-23.402-36.486 0-40.746 12.753-40.746 22.607 0 11.963 5.031 15.441 54.294 22.172 48.761 6.663 71.933 16.117 71.933 51.552 0 35.781-28.808 58.783-79.075 58.783l.035.001z"/></svg></template>
--- a/lib/icons/logo-npm.vue
+++ b/lib/icons/logo-npm.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M227.6 213.1H256v57.1h-28.4z"/><path d="M0 156v171.4h142.2V356H256v-28.6h256V156H0zm142.2 142.9h-28.4v-85.7H85.3v85.7H28.4V184.6h113.8v114.3zm142.2 0h-56.9v28.6h-56.9V184.6h113.8v114.3zm199.2 0h-28.4v-85.7h-28.4v85.7h-28.4v-85.7H370v85.7h-56.9V184.6h170.7v114.3z"/></svg></template>
--- a/lib/icons/logo-octocat.vue
+++ b/lib/icons/logo-octocat.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M178.4 287.5c-9.1 0-16.9 4.2-23.2 12.8-6.3 8.5-9.4 19-9.4 31.4 0 12.5 3.2 23 9.4 31.5 6.3 8.5 14 12.8 23.2 12.8 8.5 0 15.9-4.3 22.1-12.8 6.3-8.5 9.4-19 9.4-31.5 0-12.4-3.2-22.9-9.4-31.4-6.3-8.6-13.6-12.8-22.1-12.8zM334.7 287.5c-9 0-16.9 4.2-23.2 12.8-6.3 8.5-9.4 19-9.4 31.4 0 12.5 3.2 23 9.4 31.5 6.3 8.5 14.1 12.8 23.2 12.8 8.5 0 15.9-4.3 22.2-12.8 6.3-8.5 9.4-19 9.4-31.5 0-12.4-3.2-22.9-9.4-31.4-6.3-8.6-13.6-12.8-22.2-12.8z"/><path d="M445.8 172c-.1 0 2.7-14.3.3-39.2-2.2-24.9-7.5-47.8-16.1-68.8 0 0-4.4.8-12.8 2.9s-22.1 6.3-40.9 14.8c-18.5 8.5-38 19.8-58.3 33.5-13.8-3.9-34.4-5.9-62-5.9-26.3 0-46.9 2-62 5.9-44.6-30.9-81.9-48-112.1-51.2-8.6 21-13.9 44-16 69-2.4 24.9.4 39.3.4 39.3C42 198.6 32 236.5 32 267.8c0 24.2.7 46.1 6.1 65.5 5.6 19.3 12.7 35.1 21.1 47.2 8.6 12.1 19 22.8 31.6 31.9 12.5 9.3 24 16 34.4 20.2 10.5 4.4 22.4 7.6 36 9.9 13.3 2.4 23.4 3.6 30.5 4 0 0 28 1.5 64.4 1.5s64.3-1.5 64.3-1.5c7-.4 17.1-1.6 30.5-4 13.5-2.3 25.5-5.6 35.9-9.9 10.4-4.3 21.9-10.9 34.5-20.2 12.5-9 22.9-19.7 31.5-31.9 8.4-12.1 15.5-27.9 21.1-47.2 5.5-19.4 6.1-41.4 6.1-65.6 0-30.3-10-68.7-34.2-95.7zm-65.4 233.6c-27.9 13.1-68.9 18.4-123.3 18.4H255c-54.4 0-95.4-5.2-122.8-18.4-27.5-13.1-41.3-40.1-41.3-80.7 0-24.3 8.6-44 25.5-59.1 7.4-6.5 16.4-11 27.6-13.7 11.1-2.6 21.4-2.8 31-2.5 9.4.4 22.6 2.2 39.3 3.5 16.8 1.3 29.3 3 41.8 3 11.7 0 27.2-2 52.1-4 25-2 43.5-3 55.5-1 12.3 2 23 6.2 32.1 14.7 17.7 15.8 26.6 35.5 26.6 59.1-.1 40.6-14.2 67.6-42 80.7z"/></svg></template>
--- a/lib/icons/logo-pinterest.vue
+++ b/lib/icons/logo-pinterest.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 132.3 32 256c0 91.7 55.2 170.5 134.1 205.2-.6-15.6-.1-34.4 3.9-51.4 4.3-18.2 28.8-122.1 28.8-122.1s-7.2-14.3-7.2-35.4c0-33.2 19.2-58 43.2-58 20.4 0 30.2 15.3 30.2 33.6 0 20.5-13.1 51.1-19.8 79.5-5.6 23.8 11.9 43.1 35.4 43.1 42.4 0 71-54.5 71-119.1 0-49.1-33.1-85.8-93.2-85.8-67.9 0-110.3 50.7-110.3 107.3 0 19.5 5.8 33.3 14.8 43.9 4.1 4.9 4.7 6.9 3.2 12.5-1.1 4.1-3.5 14-4.6 18-1.5 5.7-6.1 7.7-11.2 5.6-31.3-12.8-45.9-47-45.9-85.6 0-63.6 53.7-139.9 160.1-139.9 85.5 0 141.8 61.9 141.8 128.3 0 87.9-48.9 153.5-120.9 153.5-24.2 0-46.9-13.1-54.7-27.9 0 0-13 51.6-15.8 61.6-4.7 17.3-14 34.5-22.5 48 20.1 5.9 41.4 9.2 63.5 9.2 123.7 0 224-100.3 224-224C480 132.3 379.7 32 256 32z"/></svg></template>
--- a/lib/icons/logo-playstation.vue
+++ b/lib/icons/logo-playstation.vue
@ -1 +0,0 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M399.8 203c-.8-17.1-3.3-34.5-10.8-50.1-4.1-8.6-9.7-16.5-16.5-23.2-6.3-6.4-13.6-11.7-21.3-16.3-17.1-10.2-37.5-17-84.4-31S192 64 192 64v358.3l79.9 25.7s.1-198.8.1-299.5v-3.8c0-9.3 7.5-16.8 16.1-16.8h.5c8.5 0 15.5 7.5 15.5 16.8V278c11 5.3 29.2 9.3 41.8 9.1 8.3.2 16.7-1.7 24-5.7 7.6-4.1 13.9-10.4 18.4-17.8 5.1-8.3 8.2-17.8 9.9-27.3 1.9-10.8 2-22.1 1.6-33.3zM86.7 357.8c27.4-9.8 89.3-29.5 89.3-29.5v-47.2s-76.5 24.8-111.3 37.1c-8.6 3.1-17.3 5.9-25.7 9.5-9.8 4.1-19.4 8.7-28.1 14.8-3.8 2.6-7.2 5.9-9.2 10.1s-2.2 9.2-.5 13.6c2 5.1 5.8 9.3 10.1 12.6 7.8 5.9 17.1 9.5 26.4 12.2 28.4 9.4 58.4 14 88.4 13.3 14.5-.2 36-1.9 50-4.4v-42s-11 2.5-41.3 12.5c-4.6 1.5-9.2 3.3-14 4.3-7.1 1.6-14.4 2.1-21.6 2.2-6.5-.3-13.2-.7-19.3-3.1-2.2-1-4.6-2.2-5.5-4.6-.8-2 .3-4 1.7-5.4 2.8-2.9 6.8-4.5 10.6-6z"/><path d="M512 345.9c-.1-6-3.7-11.2-7.9-15-7.1-6.3-15.9-10.3-24.7-13.5-5.5-1.9-9.3-3.3-14.7-5-25.2-8.2-51.9-11.2-78.3-11.3-8 .3-23.1.5-31 1.4-21.9 2.5-67.3 15.4-67.3 15.4v48.8s67.5-21.6 96.5-31.8c9.7-3.3 20.1-4.6 30.3-4.6 6.5.2 13.2.7 19.4 3.1 2.2.9 4.5 2.2 5.5 4.5.9 2.6-.9 5-2.9 6.5-4.7 3.8-10.7 5.3-16.2 7.4-41 14.5-132.7 44.7-132.7 44.7v47s117.2-39.6 170.8-58.8c8.9-3.3 17.9-6.1 26.4-10.4 7.9-4 15.8-8.6 21.8-15.3 3.1-3.6 5-8 5-13.1z"/></svg></template>
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M144 268.4V358c0 6.9 4.5 14 11.4 14H184v52c0 13.3 10.7 24 24 24s24-10.7 24-24v-52h49v52c0 7.5 3.4 14.2 8.8 18.6 3.9 3.4 9.1 5.4 14.7 5.4h.5c13.3 0 24-10.7 24-24v-52h27.6c7 0 11.4-7.1 11.4-13.9V192H144v76.4zM408 176c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24v-96c0-13.3-10.7-24-24-24zM104 176c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24v-96c0-13.3-10.7-24-24-24z"/><g><path d="M311.2 89.1l18.5-21.9c.4-.5-.2-1.6-1.3-2.5-1.1-.8-2.4-1-2.7-.4l-19.2 22.8c-13.6-5.4-30.2-8.8-50.6-8.8-20.5-.1-37.2 3.2-50.8 8.5l-19-22.4c-.4-.5-1.6-.4-2.7.4s-1.7 1.8-1.3 2.5l18.3 21.6c-48.2 20.9-55.4 72.2-56.4 87.2h223.6c-.9-15.1-8-65.7-56.4-87zm-104.4 49.8c-7.4 0-13.5-6-13.5-13.3 0-7.3 6-13.3 13.5-13.3 7.4 0 13.5 6 13.5 13.3 0 7.3-6 13.3-13.5 13.3zm98.4 0c-7.4 0-13.5-6-13.5-13.3 0-7.3 6-13.3 13.5-13.3 7.4 0 13.5 6 13.5 13.3 0 7.3-6.1 13.3-13.5 13.3z"/></g></svg></template>
				`@ -1 +0,0 @@`
				`<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M213.573 256h84.846l-42.427-89.356z"/><path d="M255.981 32L32 112l46.12 272L256 480l177.75-96L480 112 255.981 32zM344 352l-26.589-56H194.584L168 352h-40L256 72l128 280h-40z"/></svg></template>`