Starlight 내장 아이콘

Starlight에는 <Icon> 컴포넌트를 통해 사용할 수 있는 200개 이상의 내장 아이콘이 포함되어 있으며, 별도의 설치가 필요하지 않습니다. starlight-plugin-icons 플러그인은 이미 테마에 구성되어 있으므로, 이 아이콘들은 모든 콘텐츠 저장소에서 작동합니다.

Icon 컴포넌트 사용법

컴포넌트를 import하고 아이콘 이름을 전달하세요:

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" />
<Icon name="rocket" size="2rem" color="var(--sl-color-accent)" />
<Icon name="seti:python" label="Python file" />

Props

Prop	타입	기본값	설명
`name`	`string`	—	필수. 아래 표에서 아이콘 이름을 선택합니다.
`label`	`string`	—	스크린 리더를 위한 접근성 라벨입니다. 의미가 있는 아이콘에 사용하고, 장식용 아이콘에는 생략합니다.
`size`	`string`	`"1em"`	너비와 높이에 적용되는 CSS 크기 값입니다.
`color`	`string`	`"currentColor"`	CSS 색상 값입니다.
`class`	`string`	—	추가 CSS 클래스입니다.

내비게이션 아이콘

up-caret

down-caret

right-caret

left-caret

up-arrow

down-arrow

right-arrow

left-arrow

UI & 인터페이스 아이콘

bars

translate

pencil

pen

document

add-document

setting

external

download

cloud-download

moon

sun

laptop

open-book

information

magnifier

forward-slash

error

warning

approve-check-circle

approve-check

rocket

star

puzzle

list-format

random

comment

comment-alt

heart

소셜 & 커뮤니티 아이콘

github

gitlab

bitbucket

codePen

farcaster

discord

gitter

twitter

x.com

mastodon

codeberg

youtube

threads

twitch

azureDevOps

microsoftTeams

instagram

stackOverflow

rss

facebook

phone

patreon

signal

slack

matrix

hackerOne

openCollective

blueSky

discourse

zulip

tiktok

기술 & 프레임워크 아이콘

astro

starlight

node

npm

pnpm

bun

deno

biome

mdx

alpine

pkl

jsr

nostr

cloudflare

vercel

netlify

apple

linux

homebrew

nix

backstage

confluence

jira

storybook

sourcehut

substack

편집기 & 브라우저

vscode

jetbrains

zed

vim

figma

sketch

chrome

edge

firefox

safari

Seti 파일 아이콘

Seti 아이콘은 seti: 접두사를 사용하며 파일 유형을 나타내기 위해 설계되었습니다. <Icon> 컴포넌트와 <FileTree> 컴포넌트에서 모두 사용할 수 있습니다.

<Icon name="seti:typescript" />
<Icon name="seti:docker" />

프로그래밍 언어

seti:javascript

seti:typescript

seti:python

seti:rust

seti:go

seti:java

seti:c

seti:cpp

seti:c-sharp

seti:f-sharp

seti:ruby

seti:php

seti:swift

seti:kotlin

seti:dart

seti:scala

seti:haskell

seti:elixir

seti:clojure

seti:lua

seti:perl

seti:R

seti:julia

seti:nim

seti:zig

seti:d

seti:crystal

seti:ocaml

seti:haxe

seti:powershell

seti:shell

seti:prolog

seti:purescript

seti:elm

seti:vala

seti:asm

seti:cu

seti:wasm

웹 & 마크업

seti:html

seti:css

seti:sass

seti:stylus

seti:json

seti:xml

seti:yml

seti:markdown

seti:csv

seti:graphql

seti:svg

seti:tex

프레임워크 & 템플릿

seti:react

seti:vue

seti:svelte

seti:spring

seti:rescript

seti:jade

seti:pug

seti:haml

seti:mustache

seti:nunjucks

seti:jinja

seti:twig

seti:liquid

seti:smarty

seti:slim

seti:coldfusion

DevOps & 빌드 도구

seti:docker

seti:terraform

seti:git

seti:github

seti:gitlab

seti:jenkins

seti:npm

seti:yarn

seti:webpack

seti:rollup

seti:vite

seti:gulp

seti:grunt

seti:gradle

seti:maven

seti:sbt

seti:makefile

seti:bazel

seti:babel

seti:eslint

seti:stylelint

seti:prisma

seti:firebase

seti:heroku

seti:puppet

seti:pipeline

파일 유형 & 기타

seti:folder

seti:default

seti:config

seti:tsconfig

seti:lock

seti:license

seti:todo

seti:ignored

seti:db

seti:notebook

seti:image

seti:svg

seti:pdf

seti:font

seti:video

seti:audio

seti:zip

seti:word

seti:xls

seti:windows

seti:sublime

seti:illustrator

seti:photoshop

seti:favicon

seti:code-search

seti:info

seti:clock