如何在Nuxt.js中使用svg图标？以及nuxt.js与vue.js使用svg图标的区别

Myth丶恋晨 2022-12-04 01:03 307阅读 0赞

首先介绍一下Nuxt.js：**Nuxt.js是一个基于 Vue.js的轻量级框架，可用来创建服务端渲染 (SSR) 应用，也可用于生成静态站点。**

官网：[https://nuxtjs.org/][https_nuxtjs.org]

使用Nuxt.js进行服务端渲染更利于SEO，这是我使用Nuxt.js的最大理由。

但是Nuxt.js的项目结构以及一些配置写法与我平常编写的vue-cli项目还是存在不少区别，所以写下这篇文章记录下在Nuxt.js中使用svg图标的过程。

去哪里找免费的svg图标资源？  
阿里巴巴矢量图标库：[https://www.iconfont.cn/][https_www.iconfont.cn]

**首先，在nuxt中使用svg总共分为三步：**

--------------------

## 1.创建vue组件 ##

首先在nuxt项目目录中的`components`中建立`SvgIcon.vue`，代码如下

<template>
      <svg :class="svgClass" aria-hidden="true" >
        <use :xlink:href="iconName" />
      </svg>
    </template>
    
    <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${ this.iconClass}` }, svgClass () { return this.className ? 'svg-icon ' + this.className : 'svg-icon' } } } </script>
    
    <style scoped> .svg-icon { width: 1em; height: 1em; font-size: 1.2em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

## 2.创建Nuxt插件文件 ##

在项目目录下建立`plugins`目录，然后在其中创建`icons.js`文件，代码如下：

import Vue from 'vue'
    // 引用组件
    import SvgIcon from '@/components/SvgIcon.vue'
    
    // 注册全局组件，组建名为svg-icon
    Vue.component('svg-icon', SvgIcon)
    
    // 引用svg图标
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    const req = require.context('@/assets/svg', true, /\.svg$/)
    requireAll(req)

此处注意：

// 引用项目 assets/svg 目录下的所有 .svg 文件
    // 如果第二个参数为 true ，程序将会遍历 assets/svg 目录下的子目录，并引用其中的 .svg 文件
    // 如果不需要遍历子目录，可设为 false 
    const req = require.context('@/assets/svg', true, /\.svg$/)

**记得在项目目录下创建`assets/svg`目录，这个目录将用于存放`.svg`文件**

## 3.配置nuxt.config.js ##

此步骤用到`svg-sprite-loader`这个依赖，先使用npm安装：

npm install svg-sprite-loader --save-dev

接着打开`nuxt.config.js`，在顶部加入：

// eslint-disable-next-line nuxt/no-cjs-in-config
    const path = require('path')

然后修改`build`部分，配置webpack：

/* ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */
      build: { 
        extend (config, ctx) { 
          // ...
          const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
          svgRule.exclude = [path.resolve(__dirname, 'assets/svg')]
          // Includes /icons/svg for svg-sprite-loader
          config.module.rules.push({ 
            test: /\.svg$/,
            include: [path.resolve(__dirname, 'assets/svg')],
            loader: 'svg-sprite-loader',
            options: { 
              symbolId: 'icon-[name]'
            }
          })
        }
      }

最后修改`plugins`部分：

/* ** Plugins to load before mounting the App ** https://nuxtjs.org/guide/plugins */
      plugins: [
        {  src: '@/plugins/icons', ssr: true }
      ],

**大功告成。重启项目，并在`assets/svg`目录下放置你的`.svg`文件，即可在项目中引用。**

引用方式：

此处`icon-class`就是你的`.svg`文件名称，直接在`.vue`文件中调用就可以了（记得先在`assets/svg`目录下放好`.svg`图标）

--------------------

## 与vue-cli项目的不同： ##

#### 主要是**第二步**`创建Nuxt插件文件`和**第三步**`配置nuxt.config.js`与配置vue-cli项目时有些区别。 ####

在vue-cli项目中，我们可以直接在`main.js`文件中使用`Vue.component('svg-icon', SvgIcon)`进行全局组件注册。

而在nuxt项目中，我们不但需要在`plugins`目录下建立插件文件进行组件注册，而且还需要在`nuxt.config.js`中的`plugins`配置项中添加插件文件。

是不是多了一些步骤？

#### 在第三步配置webpack时，在vue-cli项目中我通常这么写： ####

`vue.config.js`

module.exports = { 
    	chainWebpack: config => { 
    	    // svg config
    	    const svgRule = config.module.rule('assets/svg')
    	    svgRule.uses.clear()
    	    svgRule.use('svg-sprite-loader').loader('svg-sprite-loader')
    	      .options({ 
    	        symbolId: 'icon-[name]'
    	      })
    	  }
    }

而在nuxt.js项目中，则变成了：

`nuxt.config.js`

build: { 
        extend (config, ctx) { 
          // ...
          const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
          svgRule.exclude = [path.resolve(__dirname, 'assets/svg')]
          // Includes /icons/svg for svg-sprite-loader
          config.module.rules.push({ 
            test: /\.svg$/,
            include: [path.resolve(__dirname, 'assets/svg')],
            loader: 'svg-sprite-loader',
            options: { 
              symbolId: 'icon-[name]'
            }
          })
        }
      }

ok，本文结束

[https_nuxtjs.org]: https://nuxtjs.org/
[https_www.iconfont.cn]: https://www.iconfont.cn/