github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/resource-icon.tsx (about) 1 import * as React from 'react'; 2 import {resources} from './resources'; 3 4 export const ResourceIcon = ({kind}: {kind: string}) => { 5 const i = resources.get(kind); 6 if (i !== undefined) { 7 return <img src={'assets/images/resources/' + i + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px'}} />; 8 } 9 if (kind === 'Application') { 10 return <i title={kind} className={`icon argo-icon-application`} />; 11 } 12 const initials = kind.replace(/[a-z]/g, ''); 13 const n = initials.length; 14 const style: React.CSSProperties = { 15 display: 'inline-block', 16 verticalAlign: 'middle', 17 padding: `${n <= 2 ? 2 : 0}px 4px`, 18 width: '32px', 19 height: '32px', 20 borderRadius: '50%', 21 backgroundColor: '#8FA4B1', 22 textAlign: 'center', 23 lineHeight: '30px' 24 }; 25 return ( 26 <div style={style}> 27 <span style={{color: 'white', fontSize: `${n <= 2 ? 1 : 0.6}em`}}>{initials}</span> 28 </div> 29 ); 30 };