扩展图标

DbMeta内置了一个图标展示组件svg-icon。 它支持一个value属性，值可以是:

1. ElementUI原生图标: el-icon-*;
2. Svg图标: 需要注册。DbMeta内置了一些;
3. http协议的绝对图片地址;
4. ./开头的相对地址, 注意, 是前端编译打包后的相对地址，建议取public中的图片资源;

SVG图标扩展

DbMeta内置了一些svg图，你可以扩展。

扩展分两步走:

1. 雪碧图处理;
2. main.js中引入;

雪碧图处理

雪碧图处理需要借助webpack和svg-sprite-loader。

下面给一个样例(截取自vue.config.js):

chainWebpack: config => {
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(path.join(__dirname, 'package/asserts/svg/src'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(path.join(__dirname, 'package/asserts/svg/src'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'me-icon-[name]'
            })
            .end()
    }

WARNING

注意上面svg-sprite-loader配置中的两点:

1. package/asserts/svg/src: 你前端工程中svg资源的路径。
2. me-icon-[name]: symbolId，必须是这个, 否则svg-icon组件中无法找到对应的图标。

main.js中引入

// /svg/index.js
const req = require.context('package/asserts/svg/src', true, /\.svg$/)
const requireAll = requireContext => {
    return requireContext.keys().map(requireContext)
}
requireAll(req)

// 导入到main.js中
import 'package/asserts/svg/index.js'