twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-04-24 23:47:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 菜单图标 icon 支持使用在线图标

Browse Source
This commit is contained in:
xiaoxian521 2022-11-08 12:10:54 +08:00
parent 969775c7cf
commit e183ea75a0
4 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ReIcon/index.ts
View File

@ -2,7 +2,7 @@ import iconifyIconOffline from "./src/iconifyIconOffline";
import iconifyIconOnline from "./src/iconifyIconOnline"; import iconifyIconOnline from "./src/iconifyIconOnline";
import fontIcon from "./src/iconfont"; import fontIcon from "./src/iconfont";
/** 离线图标组件 */ /** 本地图标组件 */
const IconifyIconOffline = iconifyIconOffline; const IconifyIconOffline = iconifyIconOffline;
/** 在线图标组件 */ /** 在线图标组件 */
const IconifyIconOnline = iconifyIconOnline; const IconifyIconOnline = iconifyIconOnline;

6
src/components/ReIcon/src/hooks.ts
View File

@ -3,7 +3,8 @@ import { h, defineComponent, Component } from "vue";
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
/** /**
* 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
* @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/}
* @param icon 必传 图标 * @param icon 必传 图标
* @param attrs 可选 iconType 属性 * @param attrs 可选 iconType 属性
* @returns Component * @returns Component
@ -34,11 +35,12 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
// svg // svg
return icon; return icon;
} else { } else {
// 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
return defineComponent({ return defineComponent({
name: "Icon", name: "Icon",
render() { render() {
const IconifyIcon = const IconifyIcon =
attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline; icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
return h(IconifyIcon, { return h(IconifyIcon, {
icon: icon, icon: icon,
...attrs ...attrs

2
src/components/ReIcon/src/iconifyIconOffline.ts
View File

@ -59,7 +59,7 @@ addIcon("close-all-tags", CloseAllTags);
addIcon("fullscreen", Fullscreen); addIcon("fullscreen", Fullscreen);
addIcon("exit-fullscreen", ExitFullscreen); addIcon("exit-fullscreen", ExitFullscreen);
// Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html // Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({ export default defineComponent({
name: "IconifyIconOffline", name: "IconifyIconOffline",
components: { IconifyIcon }, components: { IconifyIcon },

1
src/components/ReIcon/src/types.ts
View File

@ -11,7 +11,6 @@ export interface iconType {
horizontalAlign?: boolean; horizontalAlign?: boolean;
verticalAlign?: boolean; verticalAlign?: boolean;
align?: string; align?: string;
online?: boolean;
onLoad?: Function; onLoad?: Function;
includes?: Function; includes?: Function;