svg-icon

最新推荐文章于 2024-04-16 09:39:37 发布

JingHiraeth

最新推荐文章于 2024-04-16 09:39:37 发布

阅读量115

点赞数

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

本文链接：https://blog.csdn.net/A5120184120/article/details/132650648

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

参考

一、安装npm i

npm install svg-sprite-loader --save

二、vue.config.js中的配置

chainWebpack: (config) => {
    config.module.rules.delete('svg'); //重点:删除默认配置中处理svg,
    config.module
        .rule('svg-sprite-loader')
        .test(/\.svg$/)
        .include
        .add(resolve('src/icons')) //处理svg目录
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        });
  },

三、SvgIcon组件(src/components/SvgIcon/index.vue)

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

四、icons文件夹

index.js文件夹

import SvgIcon from '@/components/SvgIcon';

const svgRequired = require.context('./svg', false, /\.svg$/);
svgRequired.keys().forEach((item) => svgRequired(item));

export default (app) => {
    app.component('SvgIcon', SvgIcon);
};

svg文件夹

用于存放.svg文件

五、main.js中

// 引入svg组件
import SvgIcon from '@/icons';

SvgIcon(app);

六、使用

<SvgIcon
          class-name="personal-center"
          style=""
          icon-class="icon-个人中心"
          @click="()=>isCollapse=!isCollapse"
        />