1 | # @nuxtjs/svg
|
2 |
|
3 | [![npm version][npm-version-src]][npm-version-href]
|
4 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
|
5 | [![Circle CI][circle-ci-src]][circle-ci-href]
|
6 | [![Codecov][codecov-src]][codecov-href]
|
7 | [![License][license-src]][license-href]
|
8 |
|
9 | _Super simple svg loading module for Nuxt.js_
|
10 |
|
11 | [📖 **Release Notes**](./CHANGELOG.md)
|
12 |
|
13 | ## Introduction
|
14 |
|
15 | SVG module for Nuxt.js, allows you to import `.svg` files in multiple ways depending on the [resource query](https://webpack.js.org/configuration/module/#rule-resourcequery) you provide. Currently, this allows you to do the following:
|
16 |
|
17 | - `file.svg` - normal import using `file-loader`
|
18 | - `file.svg?data` - base64 data url import using `url-loader`
|
19 | - `file.svg?inline` - inline import using `vue-svg-loader`
|
20 |
|
21 | ## Installation
|
22 |
|
23 | Using Yarn:
|
24 | /**
|
25 | * This is the original RegExp cloned from the original Nuxt.js configuration
|
26 | * files, with only the search for ".svg" files removed. Keep tabs on this in
|
27 | * case the core decides to add additional qualifiers to the pattern.
|
28 | */
|
29 | const ORIGINAL_TEST = /\.(png|jpe?g|gif|svg|webp)$/;
|
30 | const REPLACEMENT_TEST = /\.(png|jpe?g|gif|webp)$/;
|
31 |
|
32 | ```console
|
33 | yarn add @nuxtjs/svg
|
34 | ```
|
35 |
|
36 | Using NPM:
|
37 |
|
38 | ```console
|
39 | npm install @nuxtjs/svg
|
40 | ```
|
41 |
|
42 | ```javascript
|
43 | // nuxt.config.js
|
44 | export default {
|
45 | modules: [
|
46 | '@nuxtjs/svg'
|
47 | ]
|
48 | };
|
49 | ```
|
50 |
|
51 | And that's it! You don't have to install anything else, you're ready to go.
|
52 |
|
53 | ## Usage
|
54 |
|
55 | The usage examples are documented as:
|
56 |
|
57 | ```html
|
58 | <!-- Nuxt.js code -->
|
59 | ```
|
60 |
|
61 | ```html
|
62 | <!-- Outputted html -->
|
63 | ```
|
64 |
|
65 | ### Standard external import
|
66 |
|
67 | _Import normally as an external resource using `file-loader`_
|
68 |
|
69 | ```html
|
70 | <template>
|
71 | <img src="~assets/nuxt.svg" />
|
72 | </template>
|
73 | ```
|
74 |
|
75 | ```html
|
76 | <img src="/_nuxt/9405b9978eb50f73b53ac1326b93f211.svg" />
|
77 | ```
|
78 |
|
79 | ### Inline base64 url
|
80 |
|
81 | _Inline as a URL (no external requests) using `url-loader`_
|
82 |
|
83 | ```html
|
84 | <template>
|
85 | <img src="~assets/nuxt.svg?data" />
|
86 | </template>
|
87 | ```
|
88 |
|
89 | ```html
|
90 | <img src="data:image/svg+xml;base64,P...2h913j1g18h98hr" />
|
91 | ```
|
92 |
|
93 | ### Inline svg element
|
94 |
|
95 | _Inline as an actual svg element using `vue-svg-loader`_
|
96 |
|
97 | ```html
|
98 | <template>
|
99 | <NuxtLogo />
|
100 | </template>
|
101 |
|
102 | <script>
|
103 | import NuxtLogo from "~/assets/nuxt.svg?inline";
|
104 |
|
105 | export default {
|
106 | components: {
|
107 | NuxtLogo
|
108 | }
|
109 | };
|
110 | </script>
|
111 | ```
|
112 |
|
113 | ```html
|
114 | <svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>
|
115 | ```
|
116 |
|
117 | ## Caveats
|
118 |
|
119 | In order for this module to work correctly, the [default `.svg` Nuxt.js webpack rule](https://nuxtjs.org/guide/assets/#webpack) gets replaced with this handler.
|
120 |
|
121 | The only difference between this and the handler is that there is no `limit` for when `file-loader` replaces `url-loader`.
|
122 |
|
123 | So when using the `?data` query, it will _always_ use `url-loader` regardless of file size, and when not using either resource query, it will always use `file-loader`).
|
124 |
|
125 | ## Contributing
|
126 |
|
127 | As this loader attempts to abstract webpack configuration from the process and make it easier to use multiple svg loaders, any contributions that add more svg loader methods to the configuration will be accepted wholeheartedly!
|
128 |
|
129 | Also I'll be actively maintaining this project so if you'd rather just make a request for a loader or a feature; I'd be happy to take a look and see what I can do myself :)
|
130 |
|
131 | ## License
|
132 |
|
133 | [MIT License](./LICENSE)
|
134 |
|
135 | Copyright (c) Sam Holmes
|
136 |
|
137 |
|
138 | [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/svg/latest.svg?style=flat-square
|
139 | [npm-version-href]: https://npmjs.com/package/@nuxtjs/svg
|
140 |
|
141 | [npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/svg.svg?style=flat-square
|
142 | [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/svg
|
143 |
|
144 | [circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/svg-module.svg?style=flat-square
|
145 | [circle-ci-href]: https://circleci.com/gh/nuxt-community/svg-module
|
146 |
|
147 | [codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/svg-module.svg?style=flat-square
|
148 | [codecov-href]: https://codecov.io/gh/nuxt-community/svg-module
|
149 |
|
150 | [license-src]: https://img.shields.io/npm/l/@nuxtjs/svg.svg?style=flat-square
|
151 | [license-href]: https://npmjs.com/package/@nuxtjs/svg
|