К сожалению, это невозможно "из коробки" через плагин.
Иконки SVG из development/platform
автоматически загружаются через webpack и svg-inline-loader
. Все значки собираются, и для каждого значка SVG создается небольшой компонент. Вы можете найти основные значки и logi c здесь: platform/src/Administration/Resources/app/administration/src/app/assets/icons
.
Однако вы можете сделать что-то подобное в своем плагине. Здесь можно создать настраиваемую конфигурацию веб-пакета:
YouPlugin
- src
- Resources
- app
- administration
- build
- webpack.config.js <-- custom webpack config
- src
- app
- assets
- icons
- svg <-- Your SVG icons
- icons.js <-- Component creation
Затем вы в основном делаете то же самое, что и ядро, но со своими собственными значками:
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = function () {
return {
module: {
rules: [
{
test: /\.svg$/,
include: [
resolve('src/app/assets/icons/svg')
],
loader: 'svg-inline-loader',
options: {
removeSVGTagAttrs: false
}
}
]
}
};
};
И в ваших значках. js:
export default (() => {
const context = require.context('./svg', false, /svg$/);
return context.keys().reduce((accumulator, item) => {
const componentName = item.split('.')[1].split('/')[1];
const component = {
name: componentName,
functional: true,
render(createElement, elementContext) {
const data = elementContext.data;
return createElement('span', {
class: [data.staticClass, data.class],
style: data.style,
attrs: data.attrs,
on: data.on,
domProps: {
innerHTML: context(item)
}
});
}
};
accumulator.push(component);
return accumulator;
}, []);
})();
Если у вас всего несколько значков, это может быть излишним. Возможно, вы могли бы рассмотреть другой подход, подобный этому (только для плагина), и использовать другой компонент, например <custom-icon>
: https://vuejs.org/v2/cookbook/editable-svg-icons.html