컴포넌트/아이콘, 이미지

I (아이콘)

VanillaFront 2026. 9. 20. 16:15

Va.I — 아이콘 표시 컴포넌트

VanillaFront 아이콘을 표시하는 전용 컴포넌트입니다. HTML <i> 태그로 렌더링되며, ico_xxx 클래스로 정의된 mask-image 방식 아이콘을 편리하게 배치합니다. Va.Component를 직접 상속합니다.

클래스 정보

Va.I extends Va.Component
tagName: 'i'
isContainer: true

기본 사용법

{
    tagName: 'i',
    icon: 'ico_add'
}

또는 코드로:

let icon = new Va.I({ icon: 'ico_edit_fill' });
parent.append(icon);

VanillaFront 아이콘 시스템

VanillaFront는 CSS mask-image 방식의 SVG 아이콘 시스템을 사용합니다:

  • 각 아이콘은 ico_xxx CSS 클래스로 정의 (va-icons.css)
  • 실제 아이콘 색상은 background-color: var(--colorStroke) — 테마별 자동 색상 조정
  • 크기는 CSS 변수 var(--sizeIconM) 등으로 통일

대표 아이콘 예시:

  • ico_add, ico_delete_fill, ico_edit_fill, ico_search
  • ico_star, ico_star_fill, ico_star_half
  • ico_checkmark, ico_checkmark_circle_fill
  • ico_arrow_up, ico_arrow_down, ico_arrow_left, ico_arrow_right
  • ico_caret_up_fill, ico_caret_down_fill
  • ico_close, ico_menu, ico_settings
  • ico_folder_open, ico_document, ico_download
  • ico_bookmark_fill, ico_pen_fill, ico_attach

속성

속성타입기본값설명

icon String — 아이콘 클래스명 ('ico_add' 등)
size String (기본) 'xsmall', 'small', 'medium', 'large', 'xlarge'
iconRotate Number — 회전 각도 (deg)
stopPropagation Boolean true 이벤트 전파 차단 (기본 true)
layout, style, class, hidden, attributes — — 공통 속성

size 값별 크기

sizeCSS 변수대략 크기

xsmall --sizeIconXS 12px
small --sizeIconS 16px
medium (기본) --sizeIconM 20px
large --sizeIconL 24px
xlarge --sizeIconXL 32px

이벤트

이벤트발생 시점콜백 인자

click 클릭 시 (sender, element, evt)
dblclick 더블클릭 시 (sender, element, evt)
contextmenu 우클릭 시 (sender, element, evt)

stopPropagation 기본값이 true — 아이콘 클릭이 부모로 버블링되지 않음. 필요 시 stopPropagation: false로 override.

메서드

  • setIcon(icon) — 아이콘 변경 후 업데이트
  • setValue(value) — 아이콘 변경 (setIcon과 동일)
  • Va.Component 공통 메서드

내부 구조

<i class="va-icon icon-only ico_add" tag-name="i"></i>

<!-- size 지정 시 -->
<i class="va-icon icon-only large ico_delete_fill"></i>

va-icon + icon-only + {size} + {icon} 클래스가 조합됩니다.

자동 적용되는 CSS

.va-icon {
    display: block;
    background-color: var(--colorStroke);  /* 테마별 자동 색상 */
    width: var(--sizeIconM);
    height: var(--sizeIconM);
}

색상 커스터마이징은 style: { backgroundColor: ... }로:

{ tagName: 'i', icon: 'ico_star_fill', style: { backgroundColor: 'gold' } }

사용 시점 — 언제 쓰나

  • 버튼 안 아이콘 — Button/MenuButton 등의 icon 속성 대신 인라인 배치 필요할 때
  • 텍스트 옆 데코레이션 — "저장됨 ✓" 같은 강조
  • 상태 표시 — 성공/실패/로딩 아이콘
  • 커스텀 툴바 — 독자적으로 배치되는 아이콘 버튼
  • 아이콘 회전 애니메이션 — iconRotate 활용

사용하지 말아야 할 때

  • 버튼 안 아이콘 — 대부분 Button의 icon 속성으로 충분 (Button이 자동 배치)
  • 이미지 파일 → Va.Image
  • 텍스트만 필요 → Va.Span / Va.Div
  • 입력 필드 안 아이콘 → 각 Field 컴포넌트의 icon 속성 사용

자주 쓰는 조합 예시

텍스트 옆 상태 아이콘

{
    tagName: 'div',
    layout: 'ds-flex fd-row ai-center gap-xs',
    tags: [
        { tagName: 'i', icon: 'ico_checkmark_circle_fill', style: { backgroundColor: 'green' } },
        { tagName: 'span', text: '저장 완료' }
    ]
}

아이콘 크기 조정

{
    tagName: 'i',
    icon: 'ico_settings',
    size: 'large'  // 24px
}

회전 애니메이션 (로딩)

config(){
    return {
        tagName: 'i',
        ref: 'refSpinner',
        icon: 'ico_refresh',
        iconRotate: 0,
        style: { transition: 'transform 1s' }
    };
}
mounted(){
    let angle = 0;
    setInterval(() => {
        angle += 360;
        let spinner = this.getRef('refSpinner');
        spinner.iconRotate = angle;
        spinner.update();
    }, 1000);
}

커스텀 색상

{
    tagName: 'i',
    icon: 'ico_star_fill',
    style: { backgroundColor: 'gold' }
}

인라인 강조 (문장 안)

{
    tagName: 'div',
    layout: 'ds-flex fd-row ai-center gap-xs',
    tags: [
        { tagName: 'span', text: '중요 알림' },
        { tagName: 'i', icon: 'ico_warning_fill', style: { backgroundColor: 'orange' } }
    ]
}

리스트 항목 앞 아이콘

{
    tagName: 'div',
    layout: 'ds-flex fd-column gap-xs',
    tags: items.map(item => ({
        tagName: 'div',
        layout: 'ds-flex fd-row ai-center gap-s',
        tags: [
            { tagName: 'i', icon: item.icon, size: 'small' },
            { tagName: 'span', text: item.text }
        ]
    }))
}

클릭 가능한 아이콘 버튼

{
    tagName: 'i',
    icon: 'ico_close',
    style: { cursor: 'pointer' },
    onClick: 'onClose'
}

실전 예시 — 상태 대시보드

config(){
    return {
        tagName: 'section',
        layout: 'ds-flex fd-row gap-m',
        tags: this.services.map(svc => ({
            tagName: 'div',
            layout: 'ds-flex fd-row ai-center gap-s',
            style: {
                padding: '10px',
                border: '1px solid var(--colorNeutralStroke)',
                borderRadius: 'var(--sizeRadiusM)'
            },
            tags: [{
                tagName: 'i',
                icon: svc.status === 'OK' ? 'ico_checkmark_circle_fill' : 'ico_close_circle_fill',
                size: 'large',
                style: {
                    backgroundColor: svc.status === 'OK' ? 'green' : 'red'
                }
            },{
                tagName: 'div',
                tags: [
                    { tagName: 'title', innerHTML: svc.name },
                    { tagName: 'subTitle', innerHTML: svc.status }
                ]
            }]
        }))
    };
}

주의사항

  • 아이콘 이름은 반드시 ico_ 접두어 — va-icons.css에 정의된 것만 사용
  • Font Awesome 등 외부 아이콘 클래스는 지원 안 됨 — classList.add()가 공백 있는 문자열 못 받아 예외 발생
  • stopPropagation 기본 true — 부모 클릭 이벤트 안 발생. 부모 이벤트 함께 필요하면 stopPropagation: false
  • 색상은 background-color로 조정 — mask-image 방식이라 color 아닌 backgroundColor 사용
  • 크기는 size 속성 우선, 그 다음 style width/height — style로 override 가능
  • 회전은 iconRotate 속성 — CSS transform 자동 적용
  • isContainer: true but 실제로 자식 넣는 경우 드묾 — 순수 아이콘 표시용

대안 비교

상황추천

독립 아이콘 표시 Va.I
버튼 안 아이콘 Va.Button의 icon 속성
이미지 파일 표시 Va.Image
텍스트 라벨 Va.Label / Va.Span
뱃지 (알림 카운트) Va.Badge
로딩 스피너 Va.Progressbar / Va.I + 회전 애니메이션

참고