forked from damianstasik/vue-svg-loader
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
04dabc6
commit d2d521d
Showing
11 changed files
with
547 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<template> | ||
<nav> | ||
<a href="#" class="btn btn-vue"> | ||
<VueLogo class="icon" /> | ||
Vue | ||
</a> | ||
<a href="#" class="btn btn-svgo"> | ||
<SVGOIcon class="icon" /> | ||
SVGO | ||
</a> | ||
<a href="#" class="btn btn-webpack"> | ||
<WebpackIcon class="icon" /> | ||
webpack | ||
</a> | ||
</nav> | ||
</template> | ||
<script> | ||
import VueLogo from './public/vue.svg'; | ||
import SVGOIcon from './public/svgo.svg'; | ||
import WebpackIcon from './public/webpack.svg'; | ||
export default { | ||
name: 'Example', | ||
components: { | ||
VueLogo, | ||
SVGOIcon, | ||
WebpackIcon, | ||
}, | ||
}; | ||
</script> | ||
<style scoped> | ||
.btn { | ||
display: inline-flex; | ||
align-items: center; | ||
margin-right: 10px; | ||
padding: 6px 10px; | ||
border-radius: 6px; | ||
border: 2px solid currentColor; | ||
} | ||
.btn-vue { color: #4fc08d; } | ||
.btn-svgo { color: #2364c0; } | ||
.btn-webpack { color: #1d78c1; } | ||
.icon { | ||
width: 28px; | ||
height: 28px; | ||
margin-right: 10px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
module.exports = { | ||
title: 'Documentation', | ||
chainWebpack: (config) => { | ||
const svgRule = config.module.rule('svg'); | ||
|
||
svgRule.uses.clear(); | ||
|
||
svgRule | ||
.use('vue-svg-loader') | ||
.loader(require.resolve('../../index')); | ||
}, | ||
themeConfig: { | ||
repo: 'visualfanatic/vue-svg-loader', | ||
editLinks: true, | ||
nav: [ | ||
{ | ||
text: 'FAQ', | ||
link: '/faq', | ||
}, | ||
], | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { Tabs, Tab } from 'vue-tabs-component'; | ||
import Logo from './public/logo.svg'; | ||
import Example from './Example'; | ||
|
||
export default ({ | ||
Vue, | ||
}) => { | ||
Vue.component('Tabs', Tabs); | ||
Vue.component('Tab', Tab); | ||
Vue.component('Logo', Logo); | ||
Vue.component('Example', Example); | ||
}; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
@import '~@default-theme/styles/config.styl' | ||
|
||
.home .hero img | ||
max-height 140px | ||
|
||
.tabs-component-tabs | ||
list-style none | ||
display flex | ||
padding-left 0 | ||
|
||
.tabs-component-tab | ||
margin-right 25px | ||
|
||
.tabs-component-tab-a | ||
color desaturate(lighten($textColor, 45%), 10%) | ||
|
||
.tabs-component-tab.is-active | ||
.tabs-component-tab-a | ||
color $accentColor | ||
|
||
.tabs-component-panels | ||
margin-bottom 40px |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
--- | ||
home: true | ||
heroText: vue-svg-loader | ||
heroImage: /logo.svg | ||
actionText: Example → | ||
tagline: Use SVG files as Vue components | ||
actionLink: /#example | ||
features: | ||
- title: Easily styleable | ||
details: This loader inlines the SVGs which enables you to style aspects like for example stroke/fill color. | ||
- title: Optimized | ||
details: Each SVG you import is optimized on-the-fly using powerful SVGO without you having to do anything. | ||
- title: SSR ready | ||
details: You can import the SVG components inside the code that is going to be rendered on the server side. | ||
--- | ||
|
||
## Installation | ||
|
||
<Tabs> | ||
<Tab name="yarn"> | ||
|
||
``` bash | ||
yarn add -D vue-svg-loader | ||
``` | ||
|
||
</Tab> | ||
<Tab name="npm"> | ||
|
||
``` bash | ||
npm i -D vue-svg-loader | ||
``` | ||
|
||
</Tab> | ||
</Tabs> | ||
|
||
## Configuration | ||
|
||
<Tabs> | ||
<Tab name="webpack"> | ||
|
||
::: warning | ||
Make sure that your current configuration is not already processing the SVG files. | ||
Check this [FAQ](/faq#how-to-use-both-inline-and-external-svgs) section if you want to use both inline and external SVGs. | ||
::: | ||
|
||
``` js | ||
module.exports = { | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.svg$/, | ||
loader: 'vue-svg-loader', | ||
}, | ||
], | ||
}, | ||
}; | ||
``` | ||
|
||
</Tab> | ||
<Tab name="Vue CLI"> | ||
|
||
By default Vue CLI uses the `file-loader` to process the SVG files, you can replace it in `vue.config.js`: | ||
|
||
``` js | ||
module.exports = { | ||
chainWebpack: (config) => { | ||
const svgRule = config.module.rule('svg'); | ||
|
||
svgRule.uses.clear(); | ||
|
||
svgRule | ||
.use('vue-svg-loader') | ||
.loader('vue-svg-loader'); | ||
}, | ||
}; | ||
``` | ||
|
||
</Tab> | ||
<Tab name="Nuxt.js"> | ||
|
||
Similarly to Vue CLI, you need to modify existing rule (in `nuxt.config.js`) that processes the SVG files: | ||
|
||
``` js | ||
module.exports = { | ||
build: { | ||
extend: (config) => { | ||
const svgRule = config.module.rules.find(rule => rule.loader === 'url-loader'); | ||
|
||
svgRule.test = /\.(png|jpe?g|gif)$/; | ||
|
||
config.module.rules.push({ | ||
test: /\.svg$/, | ||
loader: 'vue-svg-loader', | ||
}); | ||
}, | ||
}, | ||
}; | ||
``` | ||
|
||
</Tab> | ||
</Tabs> | ||
|
||
## Example | ||
|
||
### Preview | ||
|
||
<Example /> | ||
|
||
### Code | ||
|
||
<<< @/docs/.vuepress/Example.vue{4,8,12,18-20,25-27} |
Oops, something went wrong.