nuxt 项目引入自定义svg图标和iconfont.js

最新推荐文章于 2024-06-24 00:28:47 发布

AwesomeCPA

最新推荐文章于 2024-06-24 00:28:47 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue svg icons

本文链接：https://blog.csdn.net/cpa0701/article/details/105967338

版权

前端专栏收录该内容

79 篇文章 4 订阅

订阅专栏

引入iconfont.js

因为iconfont相当于插件了，所以要在nuxt.config.js中的plugins中进行注入

plugins: [{ src: "./static/font/iconfont.js", ssr: false }]

ssr要使用false，因为iconfont.js中有用到window，在服务端渲染时会报错

不要在组件中引用，在nuxt中要当成插件引入

引入自定义svg

创建svg组件icon-svg

<template>
  <svg :class="svgClass" :style="[baseStyles, addStyles]" @click="onClick" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'IconSvg',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    styleObj: {
      type: Object,
      default() {
        return {}
      }
    },
    width: {
      type: [String, Number],
      default: '10'
    },
    height: {
      type: [String, Number],
      default: '10'
    },
    color: {
      type: String,
      default: ''
    },
    addStyles: {
      type: Object,
      default() {
        return {}
      }
    },
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseStyles: {
        width: this.width + 'px',
        height: this.height + 'px',
        color: this.color
      }
    }
  },
  computed: {
    iconName() {
      return `#icon${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('Click')
    }
  }
}
</script>
<style scoped lang="less">
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: @mainColor;
    overflow: hidden;
  }
</style>

我们都知道，在使用nuxt的时候，我们使用任何插件的时候都需要在plugins文件夹创建，所以，我们在这里创建icon.js文件，为了去创建一个全局的Icon组件，代码如下：

import Vue from 'vue'

import IconSvg from '_c/common/icon-svg'
Vue.component('icon-svg', IconSvg)
const req = require.context('@/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

const req = require.context('@/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

这段代码必须要引入，否则打包后自定义的svg图标不会显示
3. 在nuxt.config.js中的Plugin注入

plugins: [ '@/plugins/icon'],

配置nuxt.config.js中的build

 /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.exclude = [resolve('icons/svg')]

      // Includes /assets/icons/svg for svg-sprite-loader
      config.module.rules.push({
        test: /\.svg$/,
        include: [resolve('icons/svg')],
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]',
        },
      })
    },
  },