hanzoai/icons
2
0
Fork 0
mirror of https://github.com/hanzoai/icons.git synced 2026-09-24 16:59:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Update Nano Banana

Browse Source
This commit is contained in:
canisminor1990
2026-02-27 19:27:26 +08:00
parent 3a2e62bd0e
commit 3790832fa1
23 changed files with 594 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+5 -5
View File
@@ -93,20 +93,20 @@
"@babel/runtime": "^7.28.6",
"@commitlint/cli": "^19.8.1",
"@lobehub/lint": "^1.26.3",
"@lobehub/ui": "^4.35.0",
"@lobehub/ui": "^4.38.4",
"@qiwi/multi-semantic-release": "^7.1.2",
"@testing-library/react": "^16.3.2",
"@types/pangu": "^4.0.2",
"@types/react": "^19.2.13",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitest/coverage-v8": "^3.2.4",
"ajv": "^8.17.1",
"ajv": "^8.18.0",
"babel-plugin-antd-style": "^1.0.4",
"clean-package": "^2.2.0",
"commitlint": "^19.8.1",
"consola": "^3.4.2",
"cross-env": "^10.1.0",
"dotenv": "^17.2.4",
"dotenv": "^17.3.1",
"dpdm": "^3.15.1",
"dumi": "^2.4.23",
"dumi-theme-lobehub": "^4.0.2",
@@ -123,7 +123,7 @@
"p-map": "^7.0.4",
"postcss-styled-syntax": "^0.7.1",
"prettier": "^3.8.1",
"puppeteer": "^24.37.2",
"puppeteer": "^24.37.5",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"remark": "^15.0.1",
packages/react-native/src/features/modelConfig.ts
+13 -2
View File
@@ -59,6 +59,7 @@ import Minimax from '../icons/Minimax';
import Mistral from '../icons/Mistral';
import Moonshot from '../icons/Moonshot';
import Morph from '../icons/Morph';
import NanoBanana from '../icons/NanoBanana';
import NousResearch from '../icons/NousResearch';
import Nova from '../icons/Nova';
import Nvidia from '../icons/Nvidia';
@@ -142,7 +143,7 @@ export const rnModelMappings: RNModelMapping[] = [
keywords: ['^gpt-', '/gpt-', 'openai'],
},
{ Icon: GLMV, keywords: ['^glm-(.*)v', '/glm-(.*)v'] },
{ Icon: ZAI, keywords: ['^glm-4', '/glm-4'] },
{ Icon: ZAI, keywords: ['^glm-5', '/glm-5', '/glm5', '^glm-4', '/glm-4', '/glm4'] },
{ Icon: ChatGLM, keywords: ['^glm-', '/glm-', 'chatglm'] },
{ Icon: CodeGeeX, keywords: ['^codegeex', '/codegeex'] },
{ Icon: Claude, keywords: ['claude'] },
@@ -160,6 +161,16 @@ export const rnModelMappings: RNModelMapping[] = [
},
{ Icon: Meta, keywords: ['llama', '/l3'] },
{ Icon: LLaVA, keywords: ['llava'] },
{
Icon: NanoBanana,
keywords: [
'gemini-3.1-pro-preview',
'gemini-3-pro-preview',
'gemini-\\d+(?:\\.\\d+)?-(?:flash|pro)-image-preview$',
'nanobanana',
'nano-banana',
],
},
{ Icon: Gemini, keywords: ['gemini'] },
{
Icon: DeepMind,
@@ -226,7 +237,7 @@ export const rnModelMappings: RNModelMapping[] = [
{ Icon: Rwkv, keywords: ['rwkv', '/eagle-'] },
{ Icon: Wenxin, keywords: ['ernie', 'irag'] },
{ Icon: Jina, keywords: ['^jina', '/jina'] },
{ Icon: Doubao, keywords: ['^ep-', 'doubao-', 'seedream', 'seededit'] },
{ Icon: Doubao, keywords: ['^ep-', 'doubao-', 'seedream', 'seededit', 'seedance-'] },
{ Icon: Hunyuan, keywords: ['hunyuan'] },
{ Icon: FishAudio, keywords: ['^d_', '^g_', '^wd_'] },
{ Icon: ByteDance, keywords: ['skylark', 'seed-', 'bytedance'] },
packages/react-native/src/icons/NanoBanana/components/Avatar.tsx
+22
View File
@@ -0,0 +1,22 @@
import React, { memo } from 'react';
import { RNIconAvatar, type RNIconAvatarProps } from '@/features';
import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
import Inner from './Inner';
export type AvatarProps = Omit<RNIconAvatarProps, 'Icon'>;
const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
return (
<RNIconAvatar
Icon={Inner}
aria-label={TITLE}
background={background || AVATAR_BACKGROUND}
color={AVATAR_COLOR}
iconMultiple={AVATAR_ICON_MULTIPLE}
{...rest}
/>
);
});
export default Avatar;
packages/react-native/src/icons/NanoBanana/components/Color.tsx
+41
View File
@@ -0,0 +1,41 @@
import React, { memo } from 'react';
import { Path, Svg } from 'react-native-svg';
import type { RNIconProps } from '@/features';
const Icon = memo<RNIconProps>(({ size = 24, style, ...rest }) => {
return (
<Svg height={size} style={style} viewBox="0 0 24 24" width={size} {...rest}>
<Path
d="M1.5 19.824c0-.548.444-.992.991-.992h.744a.991.991 0 010 1.983H2.49a.991.991 0 01-.991-.991z"
fill="#F3AD61"
/>
<Path
d="M14.837 13.5h7.076c.522 0 .784-.657.413-1.044l-1.634-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044zM3.587 13.5h7.076c.521 0 .784-.659.414-1.044l-1.635-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044z"
fill="#F9C23C"
/>
<Path
d="M12.525 1.521c3.69-.53 5.97 8.923 4.309 12.744-1.662 3.82-5.248 4.657-9.053 6.152a3.49 3.49 0 01-1.279.244c-1.443 0-2.227 1.187-2.774-.282-.707-1.9.22-4.031 2.069-4.757 2.014-.79 3.084-2.308 3.89-4.364.82-2.096.877-2.956.873-5.241-.003-1.827-.123-4.195 1.965-4.496z"
fill="#FEEFC2"
/>
<Path
d="M16.834 14.264l-7.095-3.257c-.815 1.873-2.29 3.308-4.156 4.043-2.16.848-3.605 3.171-2.422 5.54 2.364 4.727 13.673-.05 13.673-6.325z"
fill="#FCD53F"
/>
<Path
clipRule="evenodd"
d="M13.68 12.362c.296.094.46.41.365.707-1.486 4.65-5.818 6.798-9.689 6.997a.562.562 0 11-.057-1.124c3.553-.182 7.372-2.138 8.674-6.216a.562.562 0 01.707-.364z"
fill="#F9C23C"
fillRule="evenodd"
/>
<Path
d="M17.43 19.85l-7.648-8.835h6.753c1.595.08 2.846 1.433 2.846 3.073v5.664c0 .997-.898 1.302-1.95.098z"
fill="#FFF478"
/>
</Svg>
);
});
Icon.displayName = 'NanoBananaColor';
export default Icon;
packages/react-native/src/icons/NanoBanana/components/Combine.tsx
+28
View File
@@ -0,0 +1,28 @@
import React, { memo } from 'react';
import { RNIconCombine, type RNIconCombineProps } from '@/features';
import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
import Color from './Color';
import Mono from './Mono';
import Text from './Text';
export interface CombineProps extends Omit<RNIconCombineProps, 'Icon' | 'Text'> {
type?: 'color' | 'mono';
}
const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
const Icon = type === 'color' ? Color : Mono;
return (
<RNIconCombine
Icon={Icon}
Text={Text}
aria-label={TITLE}
spaceMultiple={COMBINE_SPACE_MULTIPLE}
textMultiple={COMBINE_TEXT_MULTIPLE}
{...rest}
/>
);
});
export default Combine;
packages/react-native/src/icons/NanoBanana/components/Inner.tsx
+45
View File
@@ -0,0 +1,45 @@
import React, { memo } from 'react';
import { Path, Svg } from 'react-native-svg';
import type { RNIconProps } from '@/features';
const Icon = memo<RNIconProps>(({ size = 24, style, ...rest }) => {
return (
<Svg height={size} style={style} viewBox="0 0 24 24" width={size} {...rest}>
<Path
d="M12.453 1.026c.826-.118 1.574.17 2.207.684.625.508 1.157 1.25 1.596 2.102.797 1.548 1.332 3.555 1.535 5.487a3.689 3.689 0 013.263 1.107l1.634 1.704c.645.674.23 1.89-.775 1.89H19.88l.002.088v5.664l-.014.237c-.028.234-.1.457-.228.647-.177.263-.445.44-.769.485-.613.087-1.256-.302-1.815-.942l-.002-.002-1.387-1.602c-1.57 1.96-4.028 3.442-6.387 4.08-2.409.65-4.976.471-6.262-1.34H2.49c-.823 0-1.49-.668-1.491-1.49l.008-.153A1.492 1.492 0 012.27 18.35c.203-1.603 1.343-2.938 2.804-3.625l.326-.141A6.95 6.95 0 006.554 14H3.587c-1.004 0-1.42-1.218-.775-1.89l1.633-1.704a3.68 3.68 0 015.105-.241 8.88 8.88 0 00.4-1.615c.099-.696.112-1.431.11-2.532 0-.88-.037-2.013.215-2.952.13-.48.342-.946.702-1.319.366-.38.855-.631 1.476-.72z"
stroke="#451D1C"
/>
<Path
d="M1.5 19.824c0-.548.444-.992.991-.992h.744a.991.991 0 010 1.983H2.49a.991.991 0 01-.991-.991z"
fill="#F3AD61"
/>
<Path
d="M14.837 13.5h7.076c.522 0 .784-.657.413-1.044l-1.634-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044zM3.587 13.5h7.076c.521 0 .784-.659.414-1.044l-1.635-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044z"
fill="#F9C23C"
/>
<Path
d="M12.525 1.521c3.69-.53 5.97 8.923 4.309 12.744-1.662 3.82-5.248 4.657-9.053 6.152a3.49 3.49 0 01-1.279.244c-1.443 0-2.227 1.187-2.774-.282-.707-1.9.22-4.031 2.069-4.757 2.014-.79 3.084-2.308 3.89-4.364.82-2.096.877-2.956.873-5.241-.003-1.827-.123-4.195 1.965-4.496z"
fill="#FEEFC2"
/>
<Path
d="M16.834 14.264l-7.095-3.257c-.815 1.873-2.29 3.308-4.156 4.043-2.16.848-3.605 3.171-2.422 5.54 2.364 4.727 13.673-.05 13.673-6.325z"
fill="#FCD53F"
/>
<Path
clipRule="evenodd"
d="M13.68 12.362c.296.094.46.41.365.707-1.486 4.65-5.818 6.798-9.689 6.997a.562.562 0 11-.057-1.124c3.553-.182 7.372-2.138 8.674-6.216a.562.562 0 01.707-.364z"
fill="#F9C23C"
fillRule="evenodd"
/>
<Path
d="M17.43 19.85l-7.648-8.835h6.753c1.595.08 2.846 1.433 2.846 3.073v5.664c0 .997-.898 1.302-1.95.098z"
fill="#FFF478"
/>
</Svg>
);
});
Icon.displayName = 'NanoBananaInner';
export default Icon;
packages/react-native/src/icons/NanoBanana/components/Mono.tsx
+27
View File
@@ -0,0 +1,27 @@
import React, { memo } from 'react';
import { Path, Svg } from 'react-native-svg';
import type { RNIconProps } from '@/features';
const Icon = memo<RNIconProps>(({ size = 24, style, color = '#000000', ...rest }) => {
return (
<Svg
color={color}
fillRule="evenodd"
height={size}
style={style}
viewBox="0 0 24 24"
width={size}
{...rest}
>
<Path
d="M8.342 13.16H3.455c-.513 0-.772-.639-.408-1.012l1.608-1.653a3.166 3.166 0 014.565 0l.513.527.006-.015.038.017c.735-1.93.786-2.809.783-5.007v-.275c-.01-1.782-.02-3.935 1.965-4.22 2.603-.375 4.504 4.219 4.815 8.299a3.166 3.166 0 013.38.774l1.609 1.653c.365.375.106 1.012-.407 1.012H19.27c.072.264.11.542.11.828v5.664c0 .914-.994 1.292-1.602.576-.229-.27-1.067-1.25-2.155-2.52-2.92 4.183-10.266 6.462-12.34 3.006a.915.915 0 01-.05 0h-.743a.991.991 0 110-1.982h.246c.014-1.687 1.23-3.148 2.846-3.783a7.448 7.448 0 002.76-1.889zm7.543-2.145c0-.127-.001-.256-.005-.388a15.693 15.693 0 00-.632-3.939c-.38-1.282-.887-2.33-1.425-2.992-.545-.671-.906-.715-1.085-.69-.223.032-.292.098-.322.129-.05.052-.135.176-.209.45-.152.567-.15 1.286-.147 2.186v.244c.002 1.134-.009 2.028-.145 2.92a11.292 11.292 0 01-.537 2.08h4.507zm-3.468 3.056c-1.636 3.166-4.981 4.71-8.118 4.87a.562.562 0 00.057 1.124c3.294-.169 6.921-1.749 8.845-5.081l-.784-.913z"
fill={color}
/>
</Svg>
);
});
Icon.displayName = 'NanoBananaMono';
export default Icon;
packages/react-native/src/icons/NanoBanana/components/Text.tsx
+27
View File
File diff suppressed because one or more lines are too long
packages/react-native/src/icons/NanoBanana/index.ts
+26
View File
@@ -0,0 +1,26 @@
import Avatar from './components/Avatar';
import Color from './components/Color';
import Combine from './components/Combine';
import Mono from './components/Mono';
import Text from './components/Text';
import { COLOR_PRIMARY, TITLE } from './style';
export type CompoundedIcon = typeof Mono & {
Avatar: typeof Avatar;
Color: typeof Color;
Combine: typeof Combine;
Text: typeof Text;
colorGradient: string;
colorPrimary: string;
title: string;
};
const Icons = Mono as CompoundedIcon;
Icons.Color = Color;
Icons.Text = Text;
Icons.Combine = Combine;
Icons.Avatar = Avatar;
Icons.colorPrimary = COLOR_PRIMARY;
Icons.title = TITLE;
export default Icons;
packages/react-native/src/icons/NanoBanana/style.ts
+9
View File
@@ -0,0 +1,9 @@
export const TITLE = 'NanoBanana';
export const COMBINE_TEXT_MULTIPLE = 0.8;
export const COMBINE_SPACE_MULTIPLE = 0.2;
export const COLOR_PRIMARY = '#FCD53F';
// Avatar constants
export const AVATAR_BACKGROUND = COLOR_PRIMARY;
export const AVATAR_COLOR = '#fff';
export const AVATAR_ICON_MULTIPLE = 0.8;
packages/react-native/src/index.ts
+1
View File
@@ -219,6 +219,7 @@ export { default as Moonshot, type CompoundedIcon as MoonshotProps } from './ico
export { default as Morph, type CompoundedIcon as MorphProps } from './icons/Morph';
export { default as MyShell, type CompoundedIcon as MyShellProps } from './icons/MyShell';
export { default as N8n, type CompoundedIcon as N8nProps } from './icons/N8n';
export { default as NanoBanana, type CompoundedIcon as NanoBananaProps } from './icons/NanoBanana';
export { default as Nebius, type CompoundedIcon as NebiusProps } from './icons/Nebius';
export { default as NewAPI, type CompoundedIcon as NewAPIProps } from './icons/NewAPI';
export { default as NotebookLM, type CompoundedIcon as NotebookLMProps } from './icons/NotebookLM';
src/NanoBanana/components/Avatar.tsx
+25
View File
@@ -0,0 +1,25 @@
'use client';
import { memo } from 'react';
import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
import Inner from './Inner';
export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
const Avatar = memo<AvatarProps>(({ ...rest }) => {
return (
<IconAvatar
Icon={Inner}
aria-label={TITLE}
background={AVATAR_BACKGROUND}
color={AVATAR_COLOR}
iconMultiple={AVATAR_ICON_MULTIPLE}
{...rest}
/>
);
});
export default Avatar;
src/NanoBanana/components/Color.tsx
+50
View File
@@ -0,0 +1,50 @@
'use client';
import { memo } from 'react';
import type { IconType } from '@/types';
import { TITLE } from '../style';
const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
return (
<svg
height={size}
style={{ flex: 'none', lineHeight: 1, ...style }}
viewBox="0 0 24 24"
width={size}
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<title>{TITLE}</title>
<path
d="M1.5 19.824c0-.548.444-.992.991-.992h.744a.991.991 0 010 1.983H2.49a.991.991 0 01-.991-.991z"
fill="#F3AD61"
/>
<path
d="M14.837 13.5h7.076c.522 0 .784-.657.413-1.044l-1.634-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044zM3.587 13.5h7.076c.521 0 .784-.659.414-1.044l-1.635-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044z"
fill="#F9C23C"
/>
<path
d="M12.525 1.521c3.69-.53 5.97 8.923 4.309 12.744-1.662 3.82-5.248 4.657-9.053 6.152a3.49 3.49 0 01-1.279.244c-1.443 0-2.227 1.187-2.774-.282-.707-1.9.22-4.031 2.069-4.757 2.014-.79 3.084-2.308 3.89-4.364.82-2.096.877-2.956.873-5.241-.003-1.827-.123-4.195 1.965-4.496z"
fill="#FEEFC2"
/>
<path
d="M16.834 14.264l-7.095-3.257c-.815 1.873-2.29 3.308-4.156 4.043-2.16.848-3.605 3.171-2.422 5.54 2.364 4.727 13.673-.05 13.673-6.325z"
fill="#FCD53F"
/>
<path
clipRule="evenodd"
d="M13.68 12.362c.296.094.46.41.365.707-1.486 4.65-5.818 6.798-9.689 6.997a.562.562 0 11-.057-1.124c3.553-.182 7.372-2.138 8.674-6.216a.562.562 0 01.707-.364z"
fill="#F9C23C"
fillRule="evenodd"
/>
<path
d="M17.43 19.85l-7.648-8.835h6.753c1.595.08 2.846 1.433 2.846 3.073v5.664c0 .997-.898 1.302-1.95.098z"
fill="#FFF478"
/>
</svg>
);
});
export default Icon;
src/NanoBanana/components/Combine.tsx
+30
View File
@@ -0,0 +1,30 @@
'use client';
import { memo } from 'react';
import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
import Color from './Color';
import Mono from './Mono';
import Text from './Text';
export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
type?: 'color' | 'mono';
}
const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
const Icon = type === 'color' ? Color : Mono;
return (
<IconCombine
Icon={Icon}
Text={Text}
aria-label={TITLE}
spaceMultiple={COMBINE_SPACE_MULTIPLE}
textMultiple={COMBINE_TEXT_MULTIPLE}
{...rest}
/>
);
});
export default Combine;
src/NanoBanana/components/Inner.tsx
+54
View File
@@ -0,0 +1,54 @@
'use client';
import { memo } from 'react';
import type { IconType } from '@/types';
import { TITLE } from '../style';
const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
return (
<svg
height={size}
style={{ flex: 'none', lineHeight: 1, ...style }}
viewBox="0 0 24 24"
width={size}
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<title>{TITLE}</title>
<path
d="M12.453 1.026c.826-.118 1.574.17 2.207.684.625.508 1.157 1.25 1.596 2.102.797 1.548 1.332 3.555 1.535 5.487a3.689 3.689 0 013.263 1.107l1.634 1.704c.645.674.23 1.89-.775 1.89H19.88l.002.088v5.664l-.014.237c-.028.234-.1.457-.228.647-.177.263-.445.44-.769.485-.613.087-1.256-.302-1.815-.942l-.002-.002-1.387-1.602c-1.57 1.96-4.028 3.442-6.387 4.08-2.409.65-4.976.471-6.262-1.34H2.49c-.823 0-1.49-.668-1.491-1.49l.008-.153A1.492 1.492 0 012.27 18.35c.203-1.603 1.343-2.938 2.804-3.625l.326-.141A6.95 6.95 0 006.554 14H3.587c-1.004 0-1.42-1.218-.775-1.89l1.633-1.704a3.68 3.68 0 015.105-.241 8.88 8.88 0 00.4-1.615c.099-.696.112-1.431.11-2.532 0-.88-.037-2.013.215-2.952.13-.48.342-.946.702-1.319.366-.38.855-.631 1.476-.72z"
stroke="#451D1C"
/>
<path
d="M1.5 19.824c0-.548.444-.992.991-.992h.744a.991.991 0 010 1.983H2.49a.991.991 0 01-.991-.991z"
fill="#F3AD61"
/>
<path
d="M14.837 13.5h7.076c.522 0 .784-.657.413-1.044l-1.634-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044zM3.587 13.5h7.076c.521 0 .784-.659.414-1.044l-1.635-1.704a3.183 3.183 0 00-4.636 0l-1.633 1.704c-.37.385-.107 1.044.414 1.044z"
fill="#F9C23C"
/>
<path
d="M12.525 1.521c3.69-.53 5.97 8.923 4.309 12.744-1.662 3.82-5.248 4.657-9.053 6.152a3.49 3.49 0 01-1.279.244c-1.443 0-2.227 1.187-2.774-.282-.707-1.9.22-4.031 2.069-4.757 2.014-.79 3.084-2.308 3.89-4.364.82-2.096.877-2.956.873-5.241-.003-1.827-.123-4.195 1.965-4.496z"
fill="#FEEFC2"
/>
<path
d="M16.834 14.264l-7.095-3.257c-.815 1.873-2.29 3.308-4.156 4.043-2.16.848-3.605 3.171-2.422 5.54 2.364 4.727 13.673-.05 13.673-6.325z"
fill="#FCD53F"
/>
<path
clipRule="evenodd"
d="M13.68 12.362c.296.094.46.41.365.707-1.486 4.65-5.818 6.798-9.689 6.997a.562.562 0 11-.057-1.124c3.553-.182 7.372-2.138 8.674-6.216a.562.562 0 01.707-.364z"
fill="#F9C23C"
fillRule="evenodd"
/>
<path
d="M17.43 19.85l-7.648-8.835h6.753c1.595.08 2.846 1.433 2.846 3.073v5.664c0 .997-.898 1.302-1.95.098z"
fill="#FFF478"
/>
</svg>
);
});
export default Icon;
src/NanoBanana/components/Mono.tsx
+27
View File
@@ -0,0 +1,27 @@
'use client';
import { memo } from 'react';
import type { IconType } from '@/types';
import { TITLE } from '../style';
const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
return (
<svg
fill="currentColor"
fillRule="evenodd"
height={size}
style={{ flex: 'none', lineHeight: 1, ...style }}
viewBox="0 0 24 24"
width={size}
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<title>{TITLE}</title>
<path d="M8.342 13.16H3.455c-.513 0-.772-.639-.408-1.012l1.608-1.653a3.166 3.166 0 014.565 0l.513.527.006-.015.038.017c.735-1.93.786-2.809.783-5.007v-.275c-.01-1.782-.02-3.935 1.965-4.22 2.603-.375 4.504 4.219 4.815 8.299a3.166 3.166 0 013.38.774l1.609 1.653c.365.375.106 1.012-.407 1.012H19.27c.072.264.11.542.11.828v5.664c0 .914-.994 1.292-1.602.576-.229-.27-1.067-1.25-2.155-2.52-2.92 4.183-10.266 6.462-12.34 3.006a.915.915 0 01-.05 0h-.743a.991.991 0 110-1.982h.246c.014-1.687 1.23-3.148 2.846-3.783a7.448 7.448 0 002.76-1.889zm7.543-2.145c0-.127-.001-.256-.005-.388a15.693 15.693 0 00-.632-3.939c-.38-1.282-.887-2.33-1.425-2.992-.545-.671-.906-.715-1.085-.69-.223.032-.292.098-.322.129-.05.052-.135.176-.209.45-.152.567-.15 1.286-.147 2.186v.244c.002 1.134-.009 2.028-.145 2.92a11.292 11.292 0 01-.537 2.08h4.507zm-3.468 3.056c-1.636 3.166-4.981 4.71-8.118 4.87a.562.562 0 00.057 1.124c3.294-.169 6.921-1.749 8.845-5.081l-.784-.913z" />
</svg>
);
});
export default Icon;
src/NanoBanana/components/Text.tsx
+26
View File
File diff suppressed because one or more lines are too long
src/NanoBanana/index.md
+72
View File
@@ -0,0 +1,72 @@
---
nav: Components
group: Model
title: Nano Banana (Google)
atomId: NanoBanana
description: https://gemini.google/overview/image-generation
---
## Icons
```tsx
import { NanoBanana } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
export default () => (
<Flexbox gap={16} horizontal>
<NanoBanana size={64} />
<NanoBanana.Color size={64} />
</Flexbox>
);
```
## Text
```tsx
import { NanoBanana } from '@lobehub/icons';
export default () => <NanoBanana.Text size={48} />;
```
## Combine
```tsx
import { NanoBanana } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
export default () => (
<Flexbox gap={16} align={'flex-start'}>
<NanoBanana.Combine size={64} />
<NanoBanana.Combine size={64} type={'color'} />
</Flexbox>
);
```
## Avatars
```tsx
import { NanoBanana } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
export default () => (
<Flexbox gap={16} horizontal>
<NanoBanana.Avatar size={64} />
<NanoBanana.Avatar size={64} shape={'square'} />
</Flexbox>
);
```
## Colors
```tsx
import { NanoBanana } from '@lobehub/icons';
import { Flexbox } from '@lobehub/ui';
import ColorPreview from '../components/ColorPreview';
export default () => (
<Flexbox gap={16} horizontal>
<ColorPreview color={NanoBanana.colorPrimary} />
</Flexbox>
);
```
src/NanoBanana/index.ts
+26
View File
@@ -0,0 +1,26 @@
import Avatar from './components/Avatar';
import Color from './components/Color';
import Combine from './components/Combine';
import Mono from './components/Mono';
import Text from './components/Text';
import { COLOR_PRIMARY, TITLE } from './style';
export type CompoundedIcon = typeof Mono & {
Avatar: typeof Avatar;
Color: typeof Color;
Combine: typeof Combine;
Text: typeof Text;
colorGradient: string;
colorPrimary: string;
title: string;
};
const Icons = Mono as CompoundedIcon;
Icons.Color = Color;
Icons.Text = Text;
Icons.Combine = Combine;
Icons.Avatar = Avatar;
Icons.colorPrimary = COLOR_PRIMARY;
Icons.title = TITLE;
export default Icons;
src/NanoBanana/style.ts
+9
View File
@@ -0,0 +1,9 @@
export const TITLE = 'NanoBanana';
export const COMBINE_TEXT_MULTIPLE = 0.8;
export const COMBINE_SPACE_MULTIPLE = 0.2;
export const COLOR_PRIMARY = '#FCD53F';
// Avatar constants
export const AVATAR_BACKGROUND = COLOR_PRIMARY;
export const AVATAR_COLOR = '#fff';
export const AVATAR_ICON_MULTIPLE = 0.8;
src/features/modelConfig.ts
+11
View File
@@ -59,6 +59,7 @@ import Minimax from '@/Minimax';
import Mistral from '@/Mistral';
import Moonshot from '@/Moonshot';
import Morph from '@/Morph';
import NanoBanana from '@/NanoBanana';
import NousResearch from '@/NousResearch';
import Nova from '@/Nova';
import Nvidia from '@/Nvidia';
@@ -162,6 +163,16 @@ export const modelMappings: ModelMapping[] = [
},
{ Icon: Meta, keywords: ['llama', '/l3'] },
{ Icon: LLaVA, keywords: ['llava'] },
{
Icon: NanoBanana,
keywords: [
'gemini-3.1-pro-preview',
'gemini-3-pro-preview',
'gemini-\\d+(?:\\.\\d+)?-(?:flash|pro)-image-preview$',
'nanobanana',
'nano-banana',
],
},
{ Icon: Gemini, keywords: ['gemini'] },
{
Icon: DeepMind,
src/icons.ts
+1
View File
@@ -178,6 +178,7 @@ export { default as Moonshot, type CompoundedIcon as MoonshotProps } from './Moo
export { default as Morph, type CompoundedIcon as MorphProps } from './Morph';
export { default as MyShell, type CompoundedIcon as MyShellProps } from './MyShell';
export { default as N8n, type CompoundedIcon as N8nProps } from './N8n';
export { default as NanoBanana, type CompoundedIcon as NanoBananaProps } from './NanoBanana';
export { default as Nebius, type CompoundedIcon as NebiusProps } from './Nebius';
export { default as NewAPI, type CompoundedIcon as NewAPIProps } from './NewAPI';
export { default as NotebookLM, type CompoundedIcon as NotebookLMProps } from './NotebookLM';
src/toc.ts
+19
View File
@@ -3364,6 +3364,25 @@ const toc: IconToc[] = [
},
title: 'NPLCloud',
},
{
color: '#FCD53F',
desc: 'https://gemini.google/overview/image-generation',
docsUrl: 'nano-banana',
fullTitle: 'Nano Banana (Google)',
group: 'model',
id: 'NanoBanana',
param: {
hasAvatar: true,
hasBrand: false,
hasBrandColor: false,
hasColor: true,
hasCombine: true,
hasText: true,
hasTextCn: false,
hasTextColor: false,
},
title: 'NanoBanana',
},
{
color: '#DAFF33',
desc: 'https://nebius.com',