vue 引用字体库iconfont，使用svg，svg组件封装注册使用

最新推荐文章于 2024-06-25 20:25:14 发布

原创最新推荐文章于 2024-06-25 20:25:14 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #iconfont #svg使用 #svg组件封装 #全局组件注册

解决方案专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在Vue项目中引入和使用SVG图标，包括配置Webpack处理SVG文件、封装SVG图标组件并实现全局注册，以及如何在项目中具体调用。

引入

public.html 引入在线链接
下载到本地后main.js 引入 iconfont.js

注意：如果项目开了eslint，可能引入iconfont.js会报错，要设置忽略

使用

<!-- xlink:href 去复制代码所复制出来的东东 -->
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icons-PromptInformation-solid"></use>
</svg>

webpack 识别svg

chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
}

组件封装

// IconSvg.vue
<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconHref"></use>
    </svg>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iconSvg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconHref: function () {
      return `#${this.iconClass}`
    }
  }
}
</script>
<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

全局组件注册

// 引入
import IconSvg from '@/components/IconSvg/IconSvg'
const globalComponents = {
  // 注册
  install (Vue) {
    Vue.component('IconSvg', IconSvg)
  }
}
export default globalComponents

// main.js
import globalComponents from './components/' // global components
Vue.use(globalComponents)`在这里插入代码片`

组件使用

<icon-svg :iconClass="'icona-project-solid'"></icon-svg>