SIcon <s-icon>

Hiển thị một icon từ bộ icon Polaris theo tên. SIcon là Vue 3 wrapper có type cho web component <s-icon> của Shopify Polaris.

import { SIcon } from 'polaris-vue-elements'

Best practices

• Dùng icon để truyền đạt thông tin, không phải để trang trí. Icon nên giải thích một hành động làm gì hoặc thể hiện một trạng thái, như icon xóa trên hành động xóa hoặc dấu tích cho việc đã hoàn thành. Đừng thêm icon chỉ để cho đẹp.
• Hãy nhất quán. Khi một icon đã đại diện cho một hành động hay khái niệm, hãy giữ nguyên như vậy trong toàn bộ app. Nếu edit nghĩa là chỉnh sửa ở một chỗ, hãy dùng nó cho việc chỉnh sửa ở mọi chỗ.
• Kết hợp icon với văn bản khi có thể. Khi đứng một mình, ngay cả icon quen thuộc cũng có thể được hiểu theo nhiều cách. Chỉ dùng icon đơn lẻ khi không gian chật hẹp, chẳng hạn button chỉ có icon kèm accessibilityLabel.
• Chọn icon được nhận biết rộng rãi. Ưu tiên icon có ý nghĩa đã quen thuộc, như search, delete và plus. Nếu một icon cần giải thích, hãy chọn icon khác.
• Để tone mang ý nghĩa. Dùng tone="critical" cho hành động phá hủy, tone="success" cho trạng thái tích cực và tone="warning" để cảnh báo. Tone nên truyền đạt điều gì đó, không phải để trang trí.

<SIcon type="alert-triangle" tone="warning" />

Xem best practices của Shopify cho <s-icon> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

<script setup>
import { SIcon } from 'polaris-vue-elements'
</script>

<template>
  <!-- `type` accepts a large named-icon union; a few examples below. See
       src/lib/generated/types.ts for the full list. -->
  <SIcon type="star" />
  <SIcon type="cart" tone="info" />
  <SIcon type="check-circle" tone="success" />
  <SIcon type="alert-triangle" tone="warning" />
  <SIcon type="delete" tone="critical" />
  <SIcon type="settings" size="small" color="subdued" />
</template>

Props

Prop	Kiểu	Mô tả
color	"subdued" | "base"	Mức nhấn mạnh màu, kiểm soát cường độ thị giác. - base: Màu chính cho văn bản nội dung, các phần tử UI tiêu chuẩn và nội dung chung, dễ đọc. - subdued: Màu giảm nhấn mạnh cho văn bản phụ, nhãn bổ trợ và các phần tử giao diện ít quan trọng hơn.
interestFor	string	ID của một component sẽ phản hồi khi có sự chú ý (ví dụ: hover và focus) trên component này.
size	"base" | "small"	Kích thước của icon. - small: Icon nhỏ hơn, phù hợp dùng inline trong văn bản hoặc trong các phần tử UI gọn. - base: Kích thước mặc định, phù hợp với icon đứng riêng và các trường hợp dùng tiêu chuẩn.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Ý nghĩa ngữ nghĩa và cách xử lý màu sắc của component. - info: Nội dung thông tin hoặc mẹo hữu ích. - success: Kết quả tích cực hoặc trạng thái thành công. - warning: Cảnh báo quan trọng về vấn đề tiềm ẩn. - critical: Vấn đề khẩn cấp hoặc hành động phá hủy. - auto: Tự động xác định dựa trên ngữ cảnh. - neutral: Thông tin chung không có mục đích cụ thể. - caution: Thông báo khuyến cáo cần chú ý.
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Icon hiển thị từ thư viện icon. Đặt thành một tên icon hợp lệ để hiển thị icon đó. Để ẩn hoàn toàn icon, dùng chuỗi rỗng ''. Để giữ chỗ cho icon mà không hiển thị icon nào, dùng 'empty'.

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).