svg-module - GitLite

KO | EN

gitlite — search

#javascript #python #typescript #llm #go #linux #docker #windows #awesome #cli #kubernetes #vue #ios #open-source

svg-module

(★ 342)

Super simple svg loading module for Nuxt.js

File Explorer

Download Latest Version (.zip)

- - nuxt.svg
- - index.vue
- nuxt.config.js
- config.js
- module.js
.gitignore
LICENSE
package-lock.json
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/nuxt-community/svg-module

Downloads the entire project code from GitHub to your computer.

cd svg-module

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save-dev @nuxtjs/svg

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @nuxtjs/svg

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

_Super simple svg loading module for Nuxt.js_

- [@nuxtjs/svg](#nuxtjssvg)
  - [Introduction](#introduction)
  - [Installation](#installation)
  - [Usage](#usage)
    - [`file-loader`](#file-loader)
    - [`url-loader`](#url-loader)
    - [`vue-svg-loader`](#vue-svg-loader)
    - [`raw-loader`](#raw-loader)
    - [`svg-sprite-loader`](#svg-sprite-loader)
  - [Caveats](#caveats)
  - [Contributing](#contributing)
  - [License](#license)

## Introduction

This package is for loading SVG's into Nuxt.js pages. It 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:

- `file.svg` - normal import using `file-loader`
- `file.svg?data` - base64 data url import using `url-loader`
- `file.svg?inline` - inline import using `vue-svg-loader`
- `file.svg?raw` - raw html import using `raw-loader`
- `file.svg?sprite` - SVG sprite using `svg-sprite-loader`

## Installation

```shell
npm install --save-dev @nuxtjs/svg
```

```javascript
// nuxt.config.js
export default {
  buildModules: ["@nuxtjs/svg"],
};
```

And that's it! You don't have to install anything else, you're ready to go.

## Configuration

```javascript
// nuxt.config.js
export default {
  svg: {
      vueSvgLoader: {
          // vue-svg-loader options
      },
      svgSpriteLoader: {
          // svg-sprite-loader options
      },
      fileLoader: {
          // file-loader options
      }
  }
};
```

## Usage

The usage examples are documented as:

```html

```

```html

```

### `file-loader`

```html
<template>
  <img src="~assets/nuxt.svg" />
</template>
```

```html
<img src="/_nuxt/9405b9978eb50f73b53ac1326b93f211.svg" />
```

### `url-loader`

```html
<template>
  <img src="~assets/nuxt.svg?data" />
</template>
```

```html
<img src="data:image/svg+xml;base64,P...2h913j1g18h98hr" />
```

### `vue-svg-loader`

```html
<template>
  <NuxtLogo />
</template>

<script>
  import NuxtLogo from "~/assets/nuxt.svg?inline";

export default {
    components: { NuxtLogo },
  };
</script>
```

```html
<svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>
```

### `raw-loader`

Load the raw SVG data as HTML using `raw-loader`:

```html
<template>
  <div v-html="rawNuxtLogo" />
</template>

<script>
  import rawNuxtLogo from "~/assets/nuxt.svg?raw";

export default {
    data() {
      return { rawNuxtLogo };
    },
  };
</script>
```

```html
<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298">
    <g fill-rule="nonzero" fill="none"><path></path></g>
  </svg>
</div>
```

### `svg-sprite-loader`

```html
<template>
    <svg :viewBox="spriteNuxtLogo.viewBox">
      <use :xlink:href="'#' + spriteNuxtLogo.id"></use>
    </svg>
</template>

<script>
  import spriteNuxtLogo from "~/assets/nuxt.svg?sprite";

export default {
    data() {
      return { spriteNuxtLogo };
    },
  };
</script>
```

```html
<svg viewBox="0 0 400 298">
  <use xlink:href="#nuxt--sprite"></use>
</svg>
```

## Dynamic imports

To dynamically import an SVG, you can use the inline `require()` syntax.

```html
<template>
  <div v-html="require(`../assets/${name}.svg?raw`)" />
</template>

<script>
  export default {
    props: {
      name: { type: String, default: "image" },
    },
  };
</script>
```

> This example uses `raw-loader`.

To render an SVG without wrapper element and the use of `v-html`, a combination of [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components) and `?inline` can be used. See #72 for context.

```html
<template>
  <component :is="require(`../assets/${name}.svg?inline`)" />
</template>

<script>
  export default {
    props: {
      name: { type: String, default: "image" },
    },
  };
</script>
```

> This example uses `vue-svg-loader`.

## Caveats

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.

The only difference between this and the handler is that there is no `limit` for when `file-loader` replaces `url-loader`.

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`).

## Contributing

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!

## License

[MIT License](./LICENSE)

Copyright (c) Sam Holmes

[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/svg/latest.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/@nuxtjs/svg
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/svg.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/svg
[license-src]: https://img.shields.io/npm/l/@nuxtjs/svg.svg?style=flat-square
[license-href]: https://npmjs.com/package/@nuxtjs/svg