1 | <p align="center"><img src="docs/.vuepress/public/logo.svg?sanitize=true" width="40%"></p>
|
2 | <h1 align="center">vue-svg-loader</h1>
|
3 | <p align="center">webpack loader that lets you use SVG files as Vue components</p>
|
4 | <p align="center">
|
5 | <a href="https://vue-svg-loader.js.org">Documentation</a> -
|
6 | <a href="https://vue-svg-loader.js.org/faq.html">FAQ</a>
|
7 | </p>
|
8 |
|
9 | ## Installation
|
10 | ``` bash
|
11 | npm i -D vue-svg-loader vue-template-compiler
|
12 |
|
13 | yarn add --dev vue-svg-loader vue-template-compiler
|
14 | ```
|
15 |
|
16 | ## Basic configuration
|
17 | ### webpack
|
18 | ``` js
|
19 | module.exports = {
|
20 | module: {
|
21 | rules: [
|
22 | {
|
23 | test: /\.svg$/,
|
24 | use: [
|
25 | 'babel-loader',
|
26 | 'vue-svg-loader',
|
27 | ],
|
28 | },
|
29 | ],
|
30 | },
|
31 | };
|
32 | ```
|
33 | ### Vue CLI
|
34 | ``` js
|
35 | module.exports = {
|
36 | chainWebpack: (config) => {
|
37 | const svgRule = config.module.rule('svg');
|
38 |
|
39 | svgRule.uses.clear();
|
40 |
|
41 | svgRule
|
42 | .use('babel-loader')
|
43 | .loader('babel-loader')
|
44 | .end()
|
45 | .use('vue-svg-loader')
|
46 | .loader('vue-svg-loader');
|
47 | },
|
48 | };
|
49 | ```
|
50 |
|
51 | ### Nuxt.js (1.x / 2.x)
|
52 | ``` js
|
53 | module.exports = {
|
54 | build: {
|
55 | extend: (config) => {
|
56 | const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
|
57 |
|
58 | svgRule.test = /\.(png|jpe?g|gif|webp)$/;
|
59 |
|
60 | config.module.rules.push({
|
61 | test: /\.svg$/,
|
62 | use: [
|
63 | 'babel-loader',
|
64 | 'vue-svg-loader',
|
65 | ],
|
66 | });
|
67 | },
|
68 | },
|
69 | };
|
70 | ```
|
71 |
|
72 | ## Example usage
|
73 | ``` vue
|
74 | <template>
|
75 | <nav>
|
76 | <a href="https://github.com/vuejs/vue">
|
77 | <VueLogo />
|
78 | Vue
|
79 | </a>
|
80 | <a href="https://github.com/svg/svgo">
|
81 | <SVGOLogo />
|
82 | SVGO
|
83 | </a>
|
84 | <a href="https://github.com/webpack/webpack">
|
85 | <WebpackLogo />
|
86 | webpack
|
87 | </a>
|
88 | </nav>
|
89 | </template>
|
90 | <script>
|
91 | import VueLogo from './public/vue.svg';
|
92 | import SVGOLogo from './public/svgo.svg';
|
93 | import WebpackLogo from './public/webpack.svg';
|
94 |
|
95 | export default {
|
96 | name: 'Example',
|
97 | components: {
|
98 | VueLogo,
|
99 | SVGOLogo,
|
100 | WebpackLogo,
|
101 | },
|
102 | };
|
103 | </script>
|
104 | ```
|
105 |
|
106 | ## License
|
107 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader?ref=badge_large)
|