Browse Source

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

i18n
xiaoxian521 2 years ago
parent
commit
9839746b00
  1. 2
      src/components/ReIcon/index.ts
  2. 6
      src/components/ReIcon/src/hooks.ts
  3. 2
      src/components/ReIcon/src/iconifyIconOffline.ts
  4. 1
      src/components/ReIcon/src/types.ts

2
src/components/ReIcon/index.ts

@ -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

@ -3,7 +3,8 @@ import { h, defineComponent, Component } from "vue";
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
/** /**
* fontawesome45+iconfontremixiconelement-plus的iconssvg
* `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

@ -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

@ -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;

Loading…
Cancel
Save