<i class="icon-star"></i>
<i class="icon-search"></i>
<i class="icon-check"></i>
<i class="icon-close"></i>

<!-- 크기 조정 -->
<i class="icon-star" style="font-size: 24px;"></i>
<i class="icon-star" style="font-size: 32px;"></i>

<!-- 색상 조정 -->
<i class="icon-star primary"></i>
<i class="icon-star success"></i>
<i class="icon-star danger"></i>

export default function MyComponent() {
  return (
    <div>
      <i className="icon-star"></i>
      <i className="icon-search"></i>

      {/* 스타일 적용 */}
      <i className="icon-check" style={{ fontSize: '24px', color: 'green' }}></i>

      {/* CSS 클래스와 함께 사용 */}
      <i className="icon-warning warning"></i>
    </div>
  );
}

@use 'podo-ui/mixin' as *;

.button {
  display: inline-flex;
  align-items: center;
  gap: s(2);

  i {
    font-size: 20px;
    color: color(primary);
  }
}

.iconWrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: r(full);
  background: color(primary-fill);

  i {
    font-size: 20px;
    color: color(primary);
  }
}