element ui 自定义icon的问题

Question

就是这个icon怎么使用自己本地的png

Answer 1

svg 格式的文件可以，
1.把 png 转成 svg
2.先写一个公共图标的组件

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

<script>
export default {
    name: 'IconSvg',
    props: {
        iconClass: {
            type: String,
            required: true
        },
        className: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        }
    },
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`;
        },
        svgClass() {
            return this.className ? this.className : 'svg-icon';
        }
    }
};
</script>

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

3.在 main.js 文件里引入公共组件

//公共组件
import IconSvg from '@/icon';
// 注册 svg 组件
Vue.component(IconSvg.name, IconSvg);

// 自动导入svg文件，把 svg 格式的文件放在某一文件夹下
const iconRequest = require.context('svg文件目录', false, /\.svg$/);
// keys方法 返回的该模块可以处理的所有可能请求的模块的数组
iconRequest.keys().forEach(iconRequest);

4.在 vue.config.js 文件内配置 svg

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

5.使用公共组件即可，iconName 就是svg文件名

<icon-svg :icon-class="iconName"></icon-svg>

Answer 2

希望这个issue可以帮助你：https://github.com/ElemeFE/el...