아이콘

아이콘 라이브러리입니다. Fluent UI System Icons 카탈로그와 사용자가 가진 SVG 아이콘, 이름이나 태그로 검색하기, 검사기, SVG 마크업으로 아이콘을 만들고 편집하는 일, 정화기가 남기는 것과 걷어 내는 것, 그리고 아이콘이 쓰이는 곳.

아이콘은 Assets 뿌리 아래의 두 번째 범주입니다. 제품이 함께 싣는 Fluent UI System Icons 카탈로그의 모든 글리프와, 사용자가 SVG 마크업으로 짜 넣은 아이콘입니다. 패널의 머리는 "아이콘"이고 "Fluent UI System Icons 카탈로그 전체와, 운전자가 가진 안전한 SVG 아이콘입니다."라는 줄과 개수 필이 함께 놓입니다. 읽는 데에는 Logic 보기가, 자기 아이콘을 만들고 편집하고 지우는 데에는 Logic 구성이 필요합니다.

카탈로그

카드 위에는 검색("이름 또는 태그")과 출처와 쪽마다가 있습니다. 검색은 대소문자를 구별하지 않고 모든 아이콘의 이름과 카탈로그 글리프의 검색 태그를 맞춰 봅니다(글리프는 이름에 없는 태그로도 찾힙니다). 자판을 누를 때마다 목록이 첫 쪽부터 다시 만들어지고, 목록이 더 이상 보여 주지 않는 선택은 풀립니다. 카드는 글리프와 이름과 출처(카탈로그 글리프는 시스템, 사용자의 것은 내 것)를 보여 줍니다. 결과가 비어 있으면 "이 거르기에 맞는 아이콘이 없습니다."와 함께 거르기 모두 해제를 내놓습니다. 카탈로그는 이름순으로 정렬됩니다. 사용자의 아이콘이 카탈로그 글리프와 마디를 함께 쓰면 두 카드가 모두 나열되고 그 주소에서는 사용자의 것이 이깁니다.

검사기

카탈로그 글리프는 "시스템 아이콘은 읽기 전용입니다."라고 알립니다. 사용자의 아이콘은 구성할 수 있는 역할에게 편집과 삭제를 내놓습니다.

새 사용자 아이콘

아이콘 행 위의 동사는 격자 자리에 "새 사용자 아이콘"을 엽니다("동작이 없는 SVG 마크업으로 주소를 가진 아이콘 하나를 만듭니다.").

칸 아래의 오류 줄은 무엇이 빠졌는지("이름과 SVG 마크업이 필요합니다.", "이름이 필요합니다.") 또는 정화기가 무엇을 거부했는지 말합니다. 아이콘 만들기는 두 칸이 모두 올바를 때까지 회색으로 남습니다. 취소나 뒤로는 만들지 않고 떠납니다. 성공하면 그 카드가 드러나고(검색과 출처 거르개가 그것을 감추게 될 때에는 거르개가 지워집니다) 작업 기록 줄이 "아이콘을 만들었습니다."라고 말합니다.

정화기가 남기는 것과 거부하는 것

아이콘 마크업은 검사를 받는 데이터 형식이지 실행되는 내용이 결코 아닙니다. 정화기는 동작이 없는 SVG를 남깁니다. svg, g, defs, symbol, use, 도형(path, rect, circle, ellipse, line, polyline, polygon), text와 tspan, title과 desc, 그라디언트와 stop, pattern, mask, clipPath, marker이며, 그 기하와 칠하기와 글자 속성, 같은 속성으로만 제한한 style 속성, 그리고 내부 참조(href="#id", url(#id))를 함께 남깁니다. 그 밖의 모든 것은 걷어 내고 고쳤다고 알립니다. script와 style 요소, foreignObject, 이벤트 속성, 외부 URL과 data: URL, 알 수 없는 속성, 올바르지 않은 id, 그리고 없는 id에 대한 참조입니다. 비어 있거나, XML로 올바르지 않거나, <svg> 뿌리가 없거나, 512 KB를 넘거나, 요소 4,096개를 넘거나, 같은 id를 두 번 담은 마크업은 아예 거부합니다. 미리 보기는 결코 정화되지 않은 마크업을 보여 주지 않으며, 저장된 아이콘도 읽을 때마다 다시 정화됩니다.

편집

편집은 "<name> 편집"을 엽니다("이름 바꾸기는 Enter를 누르거나 입력란에서 포커스가 떠날 때 저장되며 참조도 함께 옮깁니다. 올바른 SVG 변경은 자동으로 저장됩니다."). 이름 바꾸기 칸인 이름 칸과 그 아래의 마크업이 있습니다. 이름을 입력하는 동안 한 줄이 그 영향을 미리 보여 줍니다("이름을 바꾸면 이 주소를 읽는 2곳이 함께 갱신됩니다.", "현재 주소를 사용하는 참조가 없습니다.", 또는 새 이름이 같은 마디로 다듬어질 때 "실제 주소는 바뀌지 않으므로 갱신할 참조가 없습니다."). Enter를 누르거나 칸을 벗어나면 확정됩니다. 아이콘은 자기 id와 마크업을 그대로 지키고, 옛 주소를 뿌리에서부터 부르던 모든 참조가 고쳐 쓰이며, 작업 기록 줄이 "아이콘 이름을 바꿨고 참조 N곳을 갱신했습니다."라고 말합니다. 이미 쓰이는 이름은 칸 아래에서 그 자리에 거부됩니다. 올바른 마크업 변경은 입력을 멈춘 뒤 0.5초 만에 저장됩니다("아이콘을 저장했습니다."). 올바르지 않은 초안은 저장되지 않고 그 이유를 말합니다. 뒤로는 마지막으로 올바랐던 마크업을 지킨 채 카탈로그로 돌아갑니다.

삭제

삭제는 "'X'을(를) 삭제하시겠습니까? 그 주소에 대한 참조는 풀리지 않은 상태가 됩니다. 이 작업은 되돌릴 수 없습니다."라고 묻습니다. 그 주소를 돌려주던 변수는 그 뒤로 아무것도 풀어내지 못하며, 그것은 검증이 나열합니다. 작업 기록 줄은 "아이콘을 삭제했습니다."라고 말합니다.

아이콘이 쓰이는 곳

Icon 출력 변수가 Assets.Icons.<name>을 돌려주고, 묶인 대시보드 아이콘 구성 요소가 그것을 그립니다. 카탈로그 글리프는 글꼴 글리프로, 사용자의 아이콘은 그 마크업으로 그립니다.

이 라이브러리가 하지 않는 일

이 라이브러리는 SVG 파일을 가져오지 않고(마크업을 붙여 넣으십시오), 사용자의 아이콘에 태그를 달지 않으며, 아이콘에 색을 입히지 않고(아이콘을 그리는 구성 요소가 그 색을 정합니다), 카탈로그 글리프를 편집하거나 감추지 않으며, 내보내기도 하지 않습니다.