小白学 VUE 系列之svg 图标导入使用

vue 导入svg 图标

我们导入svg,方便我们对图标操作,很轻易的实现插拔。
安装svg插件

npm i -D svg-sprite-loader

目录部署

src
|-- App.vue
|-- assets
|   |-- icons
|   |   `-- user.svg
|   `-- logo.png
|-- components
|   |-- HelloWorld.vue
|   `-- SvgIcon.vue
|-- icons
|   |-- front.js
|   `-- index.js
|-- main.js
|-- router
|   `-- index.js
|-- store
|   `-- index.js
`-- views
    |-- About.vue
    `-- Home.vue
  • assets/icons 图标自己制作存放位置 下
  • icons/front.js iconfont图标的Symbol
  • components/SvgIcon.vue 存储我们的图标的公用组件

配置vue.config.js

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'components': '@/components',
        'assets': '@/assets',
        'network': '@/network',
        'views': '@/views',
      }
    }

  },
  chainWebpack: config => {
    config.module.rule('svg')
      .exclude.add(resolve('src/assets/icons')) //排除svg加载
      .end()

    config.module.rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons')) //添加我们要处理svg图标加载目录
      .end()
      .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]' 
      })

  }

}

为了简单了解下,我们先不用组件封装调用。我们在home.vue下导入我们的 svg 图标,然后使用 svg.
使用 svg 语法

 <svg>
     <use xlink:href="#icon-user"></use>
 </svg>

home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <svg><use xlink:href="#icon-user"></use> </svg>

  </div>
</template>

<script>

import '../assets/icons/user.svg'

export default {
  name: 'Home',
  components: {

  }
}
</script>

这样我们就可以输出我们存储的svg图标
描述
如果图标觉得太大,可以给 svg 加个 class

...

<svg class="svg-icon"><use xlink:href="#icon-user"></use> </svg>

...

<style>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

描述

大概知道使用我们现在进行封装下组件,方便调用和修改

封装svg 图标组件

src/components/SvgIcon.vue

<template>
    <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
  export default {
    name: "SvgIcon",
    props:{
      iconClass:{
        type:String,
        required:true
      }
    },
    computed:{
      iconName(){
        return `#icon-${this.iconClass}`
      }
    }
  }
</script>

<style>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

现在我们想让这个组件全局使用,我们定义一个src/icons/index.js作为图标映入文件

import Vue from 'vue'
import SvgIcon from '../components/SvgIcon'// svg component
Vue.component('svg-icon',SvgIcon);

//引入阿里云图标symbol
import './front';
//引入svg文件目录下的svg全部图标导入
const req = require.context('../assets/icons', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

现在我们在main.js下引入下图标导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//导入图标
import './icons/index'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用

 <svg-icon icon-class="user"></svg-icon>
<svg-icon icon-class="dianzan"></svg-icon>

描述

阿里巴巴图标引入

例如阿里巴巴图标如下
描述

现在我们开始把js存储到/src/icons/front.js

现在在src/icons/index.js引入即可

//引入阿里云图标symbol
import './front';

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。