feat(docz-plugin-svgr): add initial version of plugin

README.md

@@ -77,8 +77,9 @@ To break barriers and facilitate the creation of tools was the purpose that **do
 
 ## 🎛   Plugins
 
- - **[docz-plugin-babel6](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-babel6):** Use this plugin to use older babel version
-- **[docz-plugin-css](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-css):** Plugin to parse css files inside your documents
+ - **[babel6](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-babel6):** Use this plugin to use older babel version
+- **[css](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-css):** Parse css files inside your documents
+- **[svgr](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-css):** Allow you to parse svg using svgr
 
 ## 🚧   Warning!
 

packages/docz-plugin-svgr/README.md

@@ -0,0 +1,46 @@
+# docz-plugin-svgr
+
+This plugin allow you to use [svgr](https://github.com/smooth-code/svgr/tree/master/packages/webpack) as loader for svg images together with default `file-loader`
+
+## Install
+
+```bash
+$ yarn add docz-plugin-svgr
+```
+
+## Usage
+
+Just import the plugin and add it on your `doczrc.js`
+
+```js
+import { svgr } from 'docz-plugin-svgr'
+
+export default {
+  plugins: [svgr()]
+}
+```
+
+Then just use named imports to import using svgr
+
+```jsx
+import starUrl, { ReactComponent as Star } from './star.svg'
+
+const App = () => (
+  <div>
+    <img src={starUrl} alt="star" />
+    <Star />
+  </div>
+)
+```
+
+## Custom options
+
+If you want to pass [custom options](https://github.com/smooth-code/svgr/tree/master/packages/webpack#passing-options) for `@svgr/webpack` just pass as first argument of the functio
+
+```js
+import { svgr } from 'docz-plugin-svgr'
+
+export default {
+  plugins: [svgr({ native: true })]
+}
+```

packages/docz-plugin-svgr/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "docz-plugin-svgr",
+  "version": "0.8.0",
+  "description": "Use svgr as loader for svg images",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.m.js",
+  "typings": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "libundler watch --ts -e all",
+    "build": "libundler build --ts -e all --c",
+    "fix": "run-s fix:*",
+    "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
+    "fix:tslint": "tslint --fix --project .",
+    "tslint": "tslint --project ."
+  },
+  "dependencies": {
+    "@svgr/webpack": "^2.1.1",
+    "docz-core": "^0.8.0"
+  }
+}

packages/docz-plugin-svgr/src/index.ts

@@ -0,0 +1,25 @@
+import { createPlugin } from 'docz-core'
+
+export interface Options {
+  [key: string]: any
+}
+
+const defaultOptions = {
+  icon: true,
+}
+
+export const svgr = (options: Options = defaultOptions) =>
+  createPlugin({
+    modifyBundlerConfig: config => {
+      const rule = config.module.rules.find(
+        (rule: any) => rule.test.toString() === '/\\.(svg)(\\?.*)?$/'
+      )
+
+      rule.use.unshift({
+        loader: '@svgr/webpack',
+        options,
+      })
+
+      return config
+    },
+  })

packages/docz-plugin-svgr/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "types": ["node"],
+    "typeRoots": ["node_modules/@types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}

packages/docz-plugin-svgr/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}

packages/docz-theme-default/src/types.d.ts

@@ -21,11 +21,6 @@ declare module 'polished/lib/color/darken'
 declare module 'pretty'
 declare module 'webfontloader'
 
-declare module '*.svg' {
-  const content: any
-  export default content
-}
-
 declare module 'facepaint' {
   interface Styles {
     [key: string]: string | number | Styles