wangeditor iconSvg

### wangeditor 中使用 Icon SVG 的方法

在 wangeditor 编辑器中集成和使用 Icon SVG 可以为用户提供更丰富的编辑体验。通过引入外部的 SVG 图标库，可以轻松实现这一目标。

#### 1. 引入 SVG 图标库
为了在项目中使用 SVG 图标，建议先引入一个合适的图标库。考虑到移动端应用开发的需求以及图标的美观性和实用性[^1]，可以选择一个开源且免费的图标集合。这些图标通常以 SVG 格式提供，非常适合用于现代 Web 应用程序。

对于 Vue3 和 wangeditor5 组合使用的场景下，在构建工具（如 Vite 或 Webpack）的支持下可以直接引用本地或 CDN 上托管的 SVG 文件作为资源。

import { createApp } from 'vue';
import App from './App.vue';

// 引入整个目录下的所有svg文件
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
try {
    const req = require.context('./assets/icons', false, /\.svg$/);
    requireAll(req);
} catch (error) {
    console.error('Failed to load icons:', error);
}

createApp(App).mount('#app');

#### 2. 自定义按钮菜单项来显示 SVG 图标
当创建自定义插件时，可以通过 `ButtonMenu` 来添加带有特定功能的新按钮，并为其指定相应的图标。这里展示如何利用上述导入的 SVG 资源为新的菜单项设置图标：

import Editor from '@wangeditor/editor-for-vue'; // 假设正在使用 vue 版本
import * as Icons from '@/path/to/your/icon/components'; // 替换成实际路径

editorConfig.menus = [
    ...,
    {
        key: 'customIcon',
        title: 'Custom Icon Menu',
        type: 'button' as const,
        className: 'my-custom-icon-button-class',
        iconSvg: `<use xlink:href="#${Icons['desired-icon-name']}"></use>`, // 插入具体想要使用的icon id
        onClick(editorInstance){
            alert('This is a custom menu item with an SVG icon!');
        }
    },
];

以上代码片段展示了如何在一个基于 Vue.js 构建的应用里向 wangeditor 添加具有 SVG 图标的自定义菜单选项。需要注意的是，这里的 `iconSvg` 属性接受内联 SVG 字符串或者指向已加载到 DOM 中的 symbol 定义的 URL fragment identifier。

此外，如果希望进一步优化用户体验，则可以根据实际情况调整样式表中的 `.my-custom-icon-button-class` 类名对应的 CSS 规则，从而改变默认外观。