폴리머 아이콘의 하위 집합을 가져 오는 방법

Question

각 카테고리에서 몇 가지 폴리머 아이콘을 사용하고 있으며 전체 세트를 가져 오지 않는 것이 좋습니다. 내가 필요로하는 것만 가져올 수있는 가능성이 있습니까 (또는 vulcanize를위한 tooling/plugin)? 게재 할 HTML 파일이 더 작습니까?

Answer 1

Polymer Iconset Generator 도구를 사용하여 기본 철 아이콘의 사용자 지정 하위 집합을 만들 수 있습니다. 정말 편리하고 필요한 것처럼 들립니다.

Answer 2

또한 구글의 재 설계 웹 사이트에서, 폴리머의 독립적 형식으로, 직접 개별적으로 희망을 다운로드 할 수 있습니다 :

https://material.io/icons/

새 추가 아이콘을 얻을 것이다이 방법도 .

Answer 3

필요한 파일 만 가져 오려면 iron-icons.html과 같은 기반을 가진 고유 한 파일 custom-icons.html을 만들 수 있습니다.

사용하려는 사용자 정의 이름과 일치하도록 <iron-iconset-svg></iron-iconset-svg> 노드에서 'name'속성을 변경하기 만하면됩니다. 'custom-icons'를 사용하면이 이름을 사용하여 아이콘을 삽입합니다.

당신의 파일의 뜻은 다음과 같다 :

방금 ​​설정 한 철 아이콘 또는 설정 다른 아이콘 (장치, 편집자, 통지 ...) 복사해야하는 <defs>...</defs> 노드 내부

<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
    <iron-iconset-svg name="custom-icons" size="24"> 
     <svg> 
      <defs> 
       . 
       . 
       . 
      </defs> 
     </svg> 
    </iron-iconset-svg> 

사용하려는 아이콘에 해당하는 <g> 노드를 열고 custom-icons.html 파일에 삽입하십시오.

예를 들어 iron-icons.html 파일의 메뉴 아이콘을 원합니다. 그냥이 요소 복사

<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g> 

및 사용자 정의 파일 내부의 <defs>...</defs> 노드 내부에 붙여 넣습니다. 이있을 것이다 : 응용 프로그램에서 이제

<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 
<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
<iron-iconset-svg name="custom-icons" size="24"> 
    <svg> 
     <defs> 
      <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g> 
     </defs> 
    </svg> 
</iron-iconset-svg> 

그냥 대신에 철 - 아이콘이 파일을 가져오고이 같은 아이콘을 사용 : 당신은 'ID를'변경 속성 값을 경우

<iron-icon icon="custom-icons:menu"></iron-icon> 

을 <g></g> 노드 (예를 들어 메뉴 2) 이와 같이하여 사용

<iron-icon icon="custom-icons:menu2"></iron-icon> 

자세한 내용은 17,451,515,

은 롭 DODSON의 polycast을 확인 이동 : Custom icons with Iron Iconsets