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 | loader: 'vue-svg-loader',
|
25 | },
|
26 | ],
|
27 | },
|
28 | };
|
29 | ```
|
30 | ### Vue CLI
|
31 | ``` js
|
32 | module.exports = {
|
33 | chainWebpack: (config) => {
|
34 | const svgRule = config.module.rule('svg');
|
35 |
|
36 | svgRule.uses.clear();
|
37 |
|
38 | svgRule
|
39 | .use('vue-svg-loader')
|
40 | .loader('vue-svg-loader');
|
41 | },
|
42 | };
|
43 | ```
|
44 |
|
45 | ### Nuxt.js (1.x / 2.x)
|
46 | ``` js
|
47 | module.exports = {
|
48 | build: {
|
49 | extend: (config) => {
|
50 | const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
|
51 |
|
52 | svgRule.test = /\.(png|jpe?g|gif|webp)$/;
|
53 |
|
54 | config.module.rules.push({
|
55 | test: /\.svg$/,
|
56 | loader: 'vue-svg-loader',
|
57 | });
|
58 | },
|
59 | },
|
60 | };
|
61 | ```
|
62 |
|
63 | ## Example usage
|
64 | ``` vue
|
65 | <template>
|
66 | <nav>
|
67 | <a href="https://github.com/vuejs/vue">
|
68 | <VueLogo />
|
69 | Vue
|
70 | </a>
|
71 | <a href="https://github.com/svg/svgo">
|
72 | <SVGOLogo />
|
73 | SVGO
|
74 | </a>
|
75 | <a href="https://github.com/webpack/webpack">
|
76 | <WebpackLogo />
|
77 | webpack
|
78 | </a>
|
79 | </nav>
|
80 | </template>
|
81 | <script>
|
82 | import VueLogo from './public/vue.svg';
|
83 | import SVGOLogo from './public/svgo.svg';
|
84 | import WebpackLogo from './public/webpack.svg';
|
85 |
|
86 | export default {
|
87 | name: 'Example',
|
88 | components: {
|
89 | VueLogo,
|
90 | SVGOLogo,
|
91 | WebpackLogo,
|
92 | },
|
93 | };
|
94 | </script>
|
95 | ```
|
96 |
|
97 | ## License
|
98 | [![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)
|