antdv 添加自定义svg图标

1 引入

import Icon from '@ant-design/icons-vue'

2 调用添加icon的方法

Icon.add

使用方式 ：

<a-icon type="svg1"/>

因为是添加到ant-design的，升级antdv出现异常时要查阅源码进行调整

import Icon from '@ant-design/icons-vue'
// var normalViewBox = '0 0 1024 1024';
// var newViewBox = '-10 0 453 512';
// var fill = 'fill';
// var outline = 'outline';
// var twotone = 'twotone';
// 引入svg 用了 vue-svg-loader
var svg1 = require('./svg1.svg')
function getSvgData(svg) {
    var _objectWithoutProperties = a => a
    var _objectSpread = a => a
    var bb = eval（'(' + svg.render.toString() + ')')
    return bb({}, { data: {}, _c: (tag, props, children) => { return { tag, props, children } } })
}
var svg = {
    svg1
}

function getNode(viewBox) {
    var paths = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        paths[_i - 1] = arguments[_i];
    }
    return {
        tag: 'svg',
        attrs: { viewBox: viewBox, focusable: false },
        children: paths.map(function (path) {
            if (Array.isArray(path)) {
                return {
                    tag: 'path',
                    attrs: {
                        fill: path[0],
                        d: path[1]
                    }
                };
            }
            return {
                tag: 'path',
                attrs: {
                    d: path
                }
            };
        })
    };
}
function getIcon(name, theme, icon) {
    return {
        name: name,
        theme: theme,
        icon: icon
    };
}
function addIcon(svg) {
    for (var x in svg) {
        var data = getSvgData(svg[x])
        var viewBox = data.props.attrs.viewBox
        var d = data.children[0].props.attrs.d;
        ['fill', 'outline', 'twotone'].forEach((f) => {
            Icon.add(
                getIcon(x, f,
                    getNode(viewBox, d)
                )
            )
        })
    }
}
addIcon(svg)

// export const mmmFill = getIcon('mmm', fill,
//     getNode(newViewBox, `M0 480v-352l128 -128h224q13 0 22.5 9t9.5 23v64h-32v-64h-192v96q0 14 -9.5 23t-23.5 9h-95v320h320v-64h32v64q0 14 -9 23t-23 9h-320q-14 0 -23 -9t-9 -23zM306 298l32 -4q2 8 4.5 13t9.5 10q2 1 3 2l2 1q2 0 3 2v-52q-21 -7 -35 -18.5t-14 -36.5q0 -40 41 -49h2l4 -1h2v-13h18v13q5 0 6 1q21 3 31 14t13 28l-31 4q-3 -10 -13 -17l-6 -3v48l6 2q22 7 35.5 17t13.5 35q0 22 -11 35.5t-38 19.5h-2l-4 1v21h-18v-20h-2l-4 -1h-2q-39 -9 -46 -52zM352 231l8 4v-43q-6 1 -8 3q-5 3 -8 6.5t-3 11.5q0 5 1.5 9t9.5 9zM380 323q1 0 1.5 -0.5t2.5 -0.5q8 -2 13 -7q6 -8 6 -16t-3 -12.5t-16 -9.5l-6 -2v49z`)
// )

// export const mmmOutline = getIcon('mmm', outline,
//     getNode(newViewBox, "M0 480v-352l128 -128h224q13 0 22.5 9t9.5 23v64h-32v-64h-192v96q0 14 -9.5 23t-23.5 9h-95v320h320v-64h32v64q0 14 -9 23t-23 9h-320q-14 0 -23 -9t-9 -23zM306 298l32 -4q2 8 4.5 13t9.5 10q2 1 3 2l2 1q2 0 3 2v-52q-21 -7 -35 -18.5t-14 -36.5q0 -40 41 -49h2l4 -1h2v-13h18v13q5 0 6 1q21 3 31 14t13 28l-31 4q-3 -10 -13 -17l-6 -3v48l6 2q22 7 35.5 17t13.5 35q0 22 -11 35.5t-38 19.5h-2l-4 1v21h-18v-20h-2l-4 -1h-2q-39 -9 -46 -52zM352 231l8 4v-43q-6 1 -8 3q-5 3 -8 6.5t-3 11.5q0 5 1.5 9t9.5 9zM380 323q1 0 1.5 -0.5t2.5 -0.5q8 -2 13 -7q6 -8 6 -16t-3 -12.5t-16 -9.5l-6 -2v49z")
// )

// export const mmmTwotone = getIcon('mmm', twotone,
//     getNode(newViewBox, 'M0 480v-352l128 -128h224q13 0 22.5 9t9.5 23v64h-32v-64h-192v96q0 14 -9.5 23t-23.5 9h-95v320h320v-64h32v64q0 14 -9 23t-23 9h-320q-14 0 -23 -9t-9 -23zM306 298l32 -4q2 8 4.5 13t9.5 10q2 1 3 2l2 1q2 0 3 2v-52q-21 -7 -35 -18.5t-14 -36.5q0 -40 41 -49h2l4 -1h2v-13h18v13q5 0 6 1q21 3 31 14t13 28l-31 4q-3 -10 -13 -17l-6 -3v48l6 2q22 7 35.5 17t13.5 35q0 22 -11 35.5t-38 19.5h-2l-4 1v21h-18v-20h-2l-4 -1h-2q-39 -9 -46 -52zM352 231l8 4v-43q-6 1 -8 3q-5 3 -8 6.5t-3 11.5q0 5 1.5 9t9.5 9zM380 323q1 0 1.5 -0.5t2.5 -0.5q8 -2 13 -7q6 -8 6 -16t-3 -12.5t-16 -9.5l-6 -2v49z')
// )

// Icon.add(mmmFill)
// Icon.add(mmmOutline)
// Icon.add(mmmTwotone)