Icon 아이콘

아이콘을 표시할 때 사용하는 아이콘 컴포넌트예요.

출처: 문서

본문

아이콘을 표시하는 데 사용해요.

언제 사용하나요?

아이콘을 표시해야 할 때 사용해요.

모든 내장 아이콘은 DevUI 공식 사이트에서 확인할 수 있어요: https://devui.design/icon/ruleResource

기본 사용법

:::demo name 속성으로 표시할 아이콘을 지정해요. DevUI 아이콘 라이브러리의 아이콘과 URL 형태의 아이콘을 모두 지원해요.

<template>
  <div class="demo-spacing">
    <d-icon name="like"></d-icon>
    <d-icon name="https://devui.design/components/assets/logo.svg" size="16px"></d-icon>
  </div>
</template>

:::

설명 정보 붙이기

:::demo prefix와 suffix로 각각 아이콘 앞뒤에 들어갈 내용을 정할 수 있어요. operable은 인터랙션 가능한 아이콘으로 만들고, disabled는 비활성 상태로, rotate는 아이콘 회전 각도 또는 자동 회전을 설정해요.

<template>
  <d-icon name="setting" operable>
    <template #prefix>
      <span>设置</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="setting" operable>
    <template #suffix>
      <span>设置</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="https://devui.design/components/assets/logo.svg" size="16px" operable>
    <template #suffix>
      <span>Logo</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="refresh" rotate="infinite" operable>
    <template #suffix>
      <span>运行中</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="edit" :rotate="180">
    <template #suffix>
      <span>编辑</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="edit" disabled>
    <template #suffix>
      <span>无权编辑</span>
    </template>
  </d-icon>
</template>

:::

색상

:::demo color 속성으로 아이콘 색을 지정해요.

<template>
  <div class="demo-spacing">
    <d-icon name="right-o" color="#3DCCA6"></d-icon>
    <d-icon name="error-o" color="#F66F6A"></d-icon>
  </div>
</template>

:::

크기

:::demo size 속성으로 아이콘 크기를 설정해요.

<template>
  <div class="demo-spacing">
    <d-icon name="insert-image"></d-icon>
    <d-icon name="insert-image" size="32px"></d-icon>
  </div>
</template>

:::

아이콘 그룹

:::demo 자주 쓰이는 아이콘 그룹 사용 시나리오예요

<template>
  <h5>可操作图标</h5>
  <d-icon-group>
    <d-icon name="add" operable disabled size="16px"></d-icon>
    <d-icon name="edit" operable size="16px"></d-icon>
    <d-icon name="delete" operable size="16px"></d-icon>
  </d-icon-group>
  <h5>静态图标</h5>
  <d-icon-group>
    <d-icon name="add" disabled size="16px"></d-icon>
    <d-icon name="edit" size="16px"></d-icon>
    <d-icon name="delete" size="16px"></d-icon>
  </d-icon-group>
</template>

:::

커스텀 폰트 아이콘

Icon 컴포넌트는 기본적으로 DevUI 아이콘 라이브러리의 아이콘을 참조해요. 기존 Icon 위에서 더 많은 아이콘을 쓰고 싶다면 서드파티 iconfont의 폰트 파일과 CSS 파일을 가져온 뒤 Icon 컴포넌트에서 바로 사용할 수 있어요.

@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-right::before {
  content: '\E03F';
}

폰트 아이콘의 css 가져오기

@import 'my-icon.css';

사용

<d-icon class-prefix="my-icon" name="right"></d-icon>

커스텀 svg

vite-plugin-vue-svg를 활용해 svg component를 넘기면 커스텀 svg를 만들 수 있어요.

<template>
  <d-icon :component="MySvgIcon"></d-icon>
</template>
<script>
import { defineComponent } from 'vue';
import MySvgIcon from '../../assets/logo.svg';

export default defineComponent({
  setup() {
    return {
      MySvgIcon,
    };
  },
});
</script>

Icon 파라미터

Icon 슬롯

더 알아보기 (Learn more)

d-icon은 DevUI 내장 아이콘 세트를 기본으로 쓰면서 URL 이미지, iconfont, svg 컴포넌트까지 끌어올 수 있는 확장성이 장점이에요. 버튼이나 태그 안에 아이콘을 넣을 때 size와 color만 잘 맞춰도 화면 톤이 깔끔하게 유지돼요.