[Showoff Saturday] Free pencil-style icon set, now 260 icons, with a setting that goes from sketchy to exact shapes
연필풍 아이콘 260개를 제공하는 Matita, 스케치와 정확한 도형 사이를 조절하는 설정 제공
Matita는 단순한 도형 레시피를 SVG와 React 아이콘으로 그리는 오픈소스 아이콘 세트입니다. 0.4.0에서 아이콘 60개와 선의 흔들림 정도를 조절하는 wobble 설정을 추가해, 손그림 느낌부터 정확한 도형까지 표현합니다.
- 주제
에디터 노트
아이콘마다 다른 손그림 느낌을 유지하면서 렌더링 결과를 재현하고, wobble로 정확한 도형까지 조절하는 점이 이 도구의 실용적인 특징입니다. React 외에도 SVG 파일과 브라우저용 인터페이스를 제공해 사용 환경 선택 폭을 넓혔습니다. 댓글에서 나온 그리기 애니메이션은 아직 구현되지 않았습니다. 제작자는 CSS 변수로 아이콘별 길이를 정규화하는 방안을 이슈로 열었고, 순차 그리기도 검토 항목으로 덧붙였습니다. 현재 제공 기능과 제안 단계의 기능을 구분하면 Matita의 범위가 분명해집니다.
AI 요약
Matita는 선, 다각선, 사각형, 원, 호 같은 기본 도형을 24 단위 그리드에 정의하고, 프로그램이 이를 SVG 아이콘으로 그립니다. 같은 이름과 seed를 쓰면 SVG, React, 브라우저 어디서든 같은 결과를 냅니다.
아이콘 구성과 사용법
0.4.0에서 아이콘 60개를 더해 전체 260개 이상을 제공하며, 의료·과학 아이콘도 추가했습니다. npm 패키지 @matita/icons는 React 컴포넌트, 프레임워크 없이 쓰는 SVG 문자열·DOM 생성 함수, 스크립트 태그, 개별 SVG 파일과 sprite를 제공합니다. 아이콘은 기본적으로 currentColor를 따르며, title을 지정하지 않으면 장식 요소로 처리합니다.
선의 표현 조절
pencil 속성을 켜면 각 획을 느슨한 연필 선 두세 개로 그립니다. pencil.css를 불러오면 종이 질감도 더해집니다. SketchIcon의 wobble 값은 0에서 정확한 선·원·모서리를 그리고, 1에서 기본 스케치 표현을 냅니다. seed를 바꾸면 같은 아이콘의 다른 손그림 변형을 얻습니다.
Reddit 반응
- @becauseiliked — 모바일 앱을 개발 중인데 손그림 스타일 디자인 언어를 선택했습니다. 용도에 잘 맞습니다. 축하합니다.
- @brightlyColossal — 고맙습니다. 어떤 앱을 만드는지 궁금합니다. 필요한 아이콘이 있으면 알려주면 추가하겠습니다.
- @CobaltMazz — 히어로 영역처럼 아이콘을 그려 나가는 애니메이션을 표준화해 아이콘마다 stroke-dashoffset을 조정하지 않게 할 수 있을까요?
- @brightlyColossal — 아이콘마다 따로 조정하지 않아도 되는 0~1 설정이 합리적입니다. 현재 경로로 가능한지 살펴보겠습니다. React 속성과 CSS 변수 중 무엇을 선호하나요?
- @CobaltMazz — 특정 라이브러리에 종속되지 않도록 CSS나 일반 JavaScript 변수 방식이 좋습니다.
- @brightlyColossal — CSS 변수를 기준으로 생각하겠습니다. 모든 아이콘의 길이를 정규화해 아이콘별 조정 없이 쓰는 --matita-draw: 0~1 구상을 이슈로 열었습니다.
- @CobaltMazz — 좋습니다. 특히 순차적으로 그리는 v2가 기대됩니다.
- @brightlyColossal — 아직 아이디어 단계이며 구현한 기능은 아닙니다. 순차 그리기도 이슈에 추가하겠습니다.
- @Longjumping-Bid-139 — 코드로 생성해 언제나 같은 결과를 내는 연필 아이콘 세트에, 정확한 모양으로 바꾸는 버튼까지 있네요. 재현 가능한 불완전함이라니요.
- @brightlyColossal — 제 문구보다 더 좋은 표어네요. 고맙습니다.
원문: Matita / 번역·요약: Trawling