심볼

모든 심볼은 시각화의 다양한 위치에서 사용할 수 있습니다. 이를 변수 또는 텍스트로 정의할 수 있습니다.

시각화에 심볼을 출력하려면 태그 [icon:SYMBOLPFAD]를 직접 텍스트에 선언합니다. 심볼 경로는 마우스 오른쪽 버튼 또는 CTRL+C로 심볼 라이브러리에서 복사할 수 있습니다. 가능한 경우 Material Symbols만 선택하여 시각화의 스타일이 일관되도록 해야 합니다.

심볼 라이브러리

모든 사용 가능한 심볼은 컨텍스트 메뉴 시각화 ▸ 심볼에서 호출하고 검색할 수 있습니다. 또한 사용자 정의 심볼 세트를 라이브러리에 가져올 수도 있습니다. 절차는 아래에 설명되어 있습니다.

참고: 심볼 목록에 표시되는 이름은 심볼 경로와 동일하지 않을 수 있습니다. 경로에 심볼 세트가 지정되지 않으면 자동으로 Glyphicons 세트가 사용됩니다.

심볼 라이브러리의 필터는 등록된 태그도 검색합니다. 이 동작이 원치 않는 경우 필터를 =로 시작하여 이름만 검색할 수 있습니다.

심볼 세트 Material Symbols (기본값)

이 심볼 세트는 완전히 동적이고 심볼의 스타일은 시각화 디자인에 따라 자동으로 구성됩니다. 또한 심볼이 활성 상태여야 하는 경우 자동으로 채워진 심볼이 사용됩니다. 그러나 모든 심볼에 채워진 변형이 있는 것은 아닙니다.

버튼 반경이 16픽셀보다 크거나 같으면 심볼이 자동으로 둥글게 됩니다. 반경이 0px이면 날카로운 심볼이 사용됩니다. 그러나 편집기에서는 항상 일반 심볼이 사용됩니다.

참고: 시각화를 일관되게 디자인하기 위해 "Material Symbols" 심볼 세트를 사용하는 것이 좋습니다.

심볼 세트 Material Animated

Material Symbols의 일부 선택된 심볼은 값을 표시하기 위해 애니메이션화되었습니다. 이러한 심볼에는 심볼만 있는 구조의 애니메이션이 있습니다. 선택 시 추가 변수가 활성화됩니다.

심볼 세트 Philips Hue

Philips Hue 심볼은 Hue 인터페이스가 사용되는 경우 자유롭게 사용할 수 있습니다. 또한 Home Assistant HASS 커뮤니티의 추가 Hue 심볼 세트가 있습니다. 자세한 내용은 이 장의 끝부분을 참조하세요.

심볼 세트 날씨

이 심볼 세트는 시각화의 날씨 심볼을 표시합니다. 이러한 심볼은 다양한 인터페이스에서 원활하게 지원됩니다. 아래 날씨 아이콘 장을 참조하세요.

심볼 세트 레거시 (구식)

레거시 심볼 세트는 모든 구식 시각화 심볼을 포함합니다. 새 인터페이스의 표시 스타일은 동일하게 유지됩니다. 이러한 심볼은 더 이상 사용하지 않는 것이 좋습니다. 새로운 인터페이스에 최적화되지 않았기 때문입니다.

다양한 구식 심볼은 여전히 애니메이션화되어 있습니다:

• legacy/door
• legacy/door_2
• legacy/lock
• legacy/shutter
• legacy/shutter_blinds
• legacy/window
• legacy/window_tilt

숨겨진 심볼

시각화용 숨겨진 심볼도 있습니다. 이러한 심볼은 아래 장에서 설명합니다.

심볼을 호출하려면 URL 접두사만 필요합니다.

사용자 정의 심볼 세트

심볼 세트를 프로젝트에 가져올 수 있습니다. 모든 심볼 세트는 ZIP 파일로 준비해야 합니다. 몇 가지 샘플 데이터를 다음에서 다운로드할 수 있습니다:

• iconset-example.zip

전문가 팁: 가져오기가 성공적으로 완료되면 심볼 세트를 .antobj로 내보낼 수 있습니다. 이를 통해 가져오기를 간소화할 수 있습니다. 심볼 세트에 마우스 오른쪽 버튼을 클릭하고 내보내기 옵션을 선택합니다.

다음은 심볼 세트의 구조 및 요구 사항을 정의하는 규칙입니다. 이 규칙을 주의 깊게 읽고 정확히 준수하세요.

규칙

• 접두사
  • _, a–z 및 0–9만 포함할 수 있습니다.
  • 대문자는 자동으로 소문자로 변환됩니다.
  • sys, src 또는 doc과 같은 예약된 이름은 유효하지 않습니다.
  • a–z로 시작해야 합니다. 숫자만 허용되지 않습니다.
  • 뒤에 있는 밑줄(_)은 제거됩니다.
  • 3자 이상이어야 합니다.
  • 여러 개의 밑줄(__)은 하나의 밑줄로 줄입니다.
• 심볼 이름
  • 자동으로 소문자로 변환됩니다.
  • 허용되는 문자: -, _, a–z 및 0–9.
  • 긴 이름과 접두사는 피해야 합니다.
  • 접두사는 고유해야 하며 한 번만 사용해야 합니다.
  • 심볼이 시스템 심볼과 동일한 이름 및 접두사를 가질 경우 이를 대체할 수 있습니다.
• 파일 제한 사항
  • 정리 후 최대 파일 크기: 10KB. 더 큰 파일은 거부됩니다.
  • SVG 파일은 정리되어야 합니다:
    • 줄 바꿈이 자동으로 제거됩니다.
    • 다음 요소가 삭제됩니다: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
    • 다음 속성이 삭제됩니다: style, fill, stroke, color, stop-color, flood-color, lighting-color.
    • 내장 스크립트, 이미지, CSS 또는 외부 리소스가 있는 아이콘은 거부됩니다.
    • 스타일이 색상 또는 스타일 블록을 포함하는 경우 가져오기도 거부될 수 있습니다.
• SVG 헤더 요구 사항
  • viewBox, width 및 height가 포함되어야 합니다. 누락된 값은 가능한 경우 자동으로 추가됩니다.
  • 다음 네임스페이스가 포함되어야 합니다: xmlns="http://www.w3.org/2000/svg". 누락되거나 잘못된 경우 자동으로 추가됩니다.
  • 아이콘 이름이 정확히 차원에 맞아야 합니다. 그렇지 않으면 아이콘이 거부됩니다.
  • 차원은 정사각형이어야 합니다(너비 = 높이). 기본값: 24px.
  • 모순된 스타일 또는 부적절한 차원을 피해야 합니다.
• 일반
  • 잘 만든 아이콘이 표시 속도를 크게 늦추거나 오작동할 수 있습니다.
  • 심볼의 저작권을 반드시 확인하세요.
  • 모든 벡터는 세 소수점까지 반올림됩니다.

구조

• iconset.ini 파일은 심볼 세트를 인식하기 위해 필수입니다.
  • ZIP 파일의 루트 디렉토리 또는 하위 폴더에 있을 수 있습니다.
  • 소문자로 작성되어야 합니다(iconset.ini).
  • 심볼 파일 이름은 대소문자를 구분하지 않습니다.
• 가져오기는 SVG 파일을 자동으로 검색하지 않습니다.
  • iconset.ini에서 아이콘 폴더를 명시적으로 정의해야 합니다(대소문자 구분).
  • ZIP 파일 템플릿에 icons/라는 폴더가 정의되었습니다.
• 하위 폴더
  • icons/에서 정의된 폴더의 하위 폴더는 카테고리로 사용됩니다.
  • 심볼 이름은 모든 카테고리에서 고유해야 합니다.
  • 심볼 폴더의 이름 규칙:
    • 최소: 차원 및 파일 확장명만(예: 24.svg).
    • filled24.svg 또는 round_filled_24.svg와 같은 변형은 유효합니다.
    • 여러 숫자가 포함된 파일 이름(예: 24_48.svg)은 유효하지 않습니다.
    • 스타일 변형은 다음을 통해 인식됩니다:
      • 채워짐: filled 또는 fill이 포함되어야 합니다.
      • 둥글게: round가 포함되어야 합니다.
      • 날카롭게: sharp가 포함되어야 합니다.
      • 둥글게와 날카롭게는 함께 사용할 수 없습니다.
    • 여러 규칙이 적용되는 경우 마지막에 인식된 파일이 사용됩니다(선택이 임의로 보일 수 있음).
• 추가 규칙
  • 중첩된 하위 폴더는 검색되지 않습니다(백업 또는 원본에 사용할 수 있음).
  • .svg가 없는 파일은 무시됩니다.
  • 심볼 폴더에는 tags.txt라는 파일이 포함되어 추가 태그를 검색에 추가할 수 있습니다.
    • 태그는 ,, ; 또는 줄 바꿈으로 구분할 수 있습니다.

특수 심볼 세트

사용자 정의 심볼 세트처럼 가져올 수 있지만 위 규칙에 따라 구성할 필요가 없는 다양한 특수 심볼 세트가 있습니다.

Hass Hue Icons

그 중 하나는 Gibhub 사이트의 hass-hue-icons입니다. 이는 Home Assistant HASS 커뮤니티의 추가 Hue 심볼 세트로 상업용 프로젝트에는 사용할 수 없습니다. 이 라이브러리는 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 라이선스에 따라 제공됩니다. 따라서 Antcas Control과 함께 제공되지 않습니다. 그러나 ZIP 파일 hass-hue-icons-main.zip를 사용하여 프로젝트에 새 심볼 세트로 언제든지 가져올 수 있습니다. Github 웹사이트의 프로젝트 라이선스 조건을 참조하세요.

출처: https://github.com/arallsopp/hass-hue-icons.

Pictogrammers의 Material Design Icons

또 다른 것은 Pictogrammers의 것입니다. 이를 위해 mdi-###.json 파일을 ZIP 파일로 압축하고 가져와야 합니다. 이 파일을 브라우저 개발자 콘솔에서 찾을 수 있으며 다운로드할 수 있습니다. 아웃라인 심볼과 채워진 심볼을 결합하려 합니다. 이 라이브러리는 Material Symbols와 거의 동일합니다. 그러나 많은 커뮤니티 확장 기능이 있습니다. 다른 심볼 세트를 라이브러리에 통합하고 싶다면 언제든지 문의해 주세요.

출처: https://pictogrammers.com/library/mdi/

하위 페이지

• 날씨 아이콘