Octicons 6.0.1

옛날에는 폰트로서 제공되고 있었던 Octicons 입니다만, 지금은 SVG로 밖에 제공되고 있지 않습니다.
README 에서는 Node.js나 Ruby에서의 사용법은 설명되어 있지만, 원소의 HTML로의 이용 방법을 모릅니다.
라고 생각하면, 단순히 SVG 태그를 그대로 사용하는 것만이었습니다.
MIT 라이센스이므로 상용도 문제 없습니다.

데모 페이지: htps : // 스타라 79. 기주 b. 이오 /하지만 - 오 치콘 s /

소스 코드: htps : // 기주 b. 코 m / 스타라 79 /

이용 절차

1. 사용하려는 아이콘 찾기

Octicons의 공식 사이트 에서 사용하려는 아이콘을 찾아 개별 페이지로 이동합니다.
이번에는 .octicon-alert을 선택했습니다.

2.SVG 태그를 통째로 복사

HTML 소스 코드를 직접 보고 <svg> 를 통째로 복사합니다.
Chrome 개발자 도구를 사용하면 <svg> 소스 코드 위에 Copy Element를 사용하여 쉽게 복사 할 수 있습니다.

3.width, height 속성 삭제

아이콘의 크기는 CSS로 일괄 지정하는 편이 관리하기 쉽기 때문에 svg 요소의 width, height 속성은 삭제합니다.

4. 보기는 CSS에서 조정한다

공식 CSS를 참고합니다.
htps : // 기주 b. 이 m / p 리메 r / 오 치콘 s / b ぉ b / 뭐 r / ぃ b / 오 치 콘 s_ 때문에 / 어서 x. sc

나는 아래와 같이 했다.

.octicon {
  display: inline-block; /* 公式と同じ */
  fill: currentColor;    /* 公式と同じ */
  vertical-align: text-bottom;
  height: 1.4em; /* 大きさは height で指定 */
}

아이콘의 색은 color 로 지정합니다.
지정하지 않으면 부모 요소의 색을 상속합니다. 이것은 fill: currentColor 덕분입니다.

.octicon-alert {
  color: red;
}

5. JavaScript로 동적으로 스타일 변경

마우스 오버 시 색상을 변경할 수도 있습니다.

document.querySelectorAll('.octicon-zap').forEach(function(elem, idx) {
  elem.onmouseover = function() {
    this.style.color = 'gold'; // マウスオーバーで金色に
  };
  elem.onmouseout = function() {
    this.style.color = ''; // 元の色に戻す
  }
});

단점

단점 중 하나는 CSS text-shadow를 사용할 수 없다는 것입니다.
예를 들어, Font Awesome 라면 아래와 같이 그림자를 붙일 수 있습니다.


그러나 Octicons에서는 불가능합니다.
아래에서도 text-shadow를 사용하고 있습니다만, SVG이므로 전혀 반영되지 않습니다.


box-shadow에서는 직사각형 이미지의 영역을 따라 음영 처리할 수 없습니다.


<feDropShadow> 과 같이 SVG 내부에서 그림자를 붙일 수도 있지만, 쉽게 사용할 수있는 방법은 아닙니다.
그림자를 붙이고 싶은 경우는, 솔직하게 폰트 형식의 아이콘을 사용하는 것이 좋다고 생각합니다.

SVG를 HTML로 표시하는 가장 좋은 방법은 무엇입니까?

SVG 파일을 IMG 태그로 표시할 수도 있습니다.
다만, 이것은 CSS나 JavaScript로 색을 바꿀 수 없습니다.
현재는 SVG 태그를 사용하는 것이 가장 좋습니다.
복잡한 그림이라면 SVG의 소스 코드도 길어져 다루기가 어려워지는 것이 난점입니다만…
다만, 폰트 파일을 다운로드하거나 CDN으로 호출할 필요가 없고, 사용하는 아이콘의 SVG 태그만을 기술하면 되므로, 그 점은 좋다고 생각합니다.

HTML5에서의 SVG 파일 조작의 습관 - Qiita