xmlplus 구성 요소 디자인 시리즈 아이콘(ICON)(1)

웹 페이지 에서 사용 하 는 아이콘 은 세 가지 로 나 눌 수 있 습 니 다.파일 아이콘,글꼴 아이콘,SVG 아이콘 입 니 다.파일 아이콘 에 대해 서 는 PNG 형식 으로 만 설명 합 니 다.
PNG 아이콘
PNG 아이콘 에 대한 인용 은 두 가지 방법 이 있 습 니 다.하 나 는 HTML 요소 img 의 src 속성 에 의 해 직접 제 시 됩 니 다.다음은 간단 한 예시 이다.

Icon: {
  css: "#icon { width: 68px; height: 68px; }",
  xml: "<img id='icon'/>",
  fun: function (sys, items, opts) {
    this.attr("src", this + ".png");
  }
}

아이콘 파일 과 구성 요소 가 있 는 파일 이 같은 등급 디 렉 터 리 에 있다 고 가정 하면 다음 과 같은 방식 으로 필요 한 아이콘 을 편리 하 게 참조 할 수 있 습 니 다.구성 요소 Icon 은 id 속성 값 을 그림 파일 이름 과 교묘 하 게 연결 시 켜 추가 속성 을 만 드 는 것 을 피 할 수 있 습 니 다.

Example: {
  css: "#example > * { padding: 10px; background: #F9F9F9; }",
  xml: "<div id='example' class='bs-example'>\
      <Icon id='msg'/>\
      <Icon id='home'/>\
      <Icon id='contact'/>\
     </div>"
}

또 다른 PNG 아이콘 을 참조 하 는 방식 은 해당 대상 에 게 background-image 스타일 을 추가 하고 스타일 에서 아이콘 이 있 는 경 로 를 제시 하 는 것 입 니 다.다음은 간단 한 예시 이다.

Icon: {
  css: "#icon { width: 68px; height: 68px; }",
  xml: "<div id='icon'/>",
  fun: function (sys, items, opts) {
    this.css("background-image", this + ".png");
  }
}

이 형식 은 앞에서 img 태그 로 제 시 된 아이콘 과 비슷 한 점 이 많다.다른 것 은 전자 가 동적 으로 지정 한 것 은 img 태그 의 src 값 이 고 후자 가 동적 으로 지정 한 것 은 div 요소 의 css 스타일 입 니 다.이 구성 요 소 는 앞에서 제시 한 Icon 구성 요소 의 사용 방식 과 완전히 일치 합 니 다.여 기 는 중복 되 지 않 습 니 다.
위 에서 제시 한 구성 요소 Icon 에 대해 서 는 분 산 된 아이콘 파일 을 사용 합 니 다.실제 응용 프로그램 에서 일반적으로 많은 아이콘 을 포함 하 는 PNG 파일 을 보 여 줍 니 다.이 경우 아이콘 구성 요 소 를 어떻게 구축 해 야 합 니까?아래 에 제 시 된 비교적 실 용적 인 방안 을 보십시오.

Icon: {
  css: "#msg { background-position: 0 0; }\
     #home { background-position: -48px 0; }\
     #contact { background-position: -96px 0; }\
     #icon { width: 68px; height: 68px; background-image: url(icons.png); }",
  xml: "<div id='icon'/>",
  fun: function (sys, items, opts) {
    sys.icon.addClass("#" + this);
  }
}

이 구성 요 소 는 스타일 항목 css 에서 아이콘 파일 이 있 는 경로 와 각종 아이콘 이 파일 에 있 는 위 치 를 직접 보 여 줍 니 다.또한 아이콘 인 스 턴 스 id 는 해당 아이콘 클래스 와 대응 합 니 다.물론 구성 요소 의 사용 방식 은 앞에서 제시 한 구성 요소 와 일치 합 니 다.
다음은 위치 정 보 를 함수 항목 으로 옮 기 는 또 다른 구성 요소 디자인 방안 입 니 다.이 방안 은 실행 가능 하지만 구성 요소 의 실행 효율 은 전자 보다 못 합 니 다.이 구성 요 소 는 매번 예화 할 때마다 위치 정 보 를 한 번 생 성 해 야 하 며,전자 에 대해 서 는 스타일 항목 이 구성 요소 의 예화 시 한 번 만 생 성 되 기 때문에 구성 요소 의 실행 성능 을 보장 합 니 다.

Icon: {
  css: "#icon { width: 48px; height: 48px; background-image: url(icons.png); }",
  xml: "<div id='icon'/>",
  fun: function (sys, items, opts) {
    var positions = {
      "msg": "0 0",
      "home": "-48px 0",
      "contact": "-96px 0"
    }
    sys.icon.css("background-position", positions[this]);
  }
}

글꼴 아이콘
글꼴 아이콘 은 아이콘 을 포함 하 는 글꼴 파일 을 도입 하여 아이콘 을 텍스트 처럼 사용 합 니 다.그것 은 PNG 아이콘 에 비해 가장 중요 한 것 은 벡터 성에 있다.글꼴 아이콘 의 인용 방식 은 두 가지 가 있 습 니 다.클래스 이름 의 인용 방식 과 유 니 코드 를 직접 참조 하 는 방식 입 니 다.
아 날로 그 인용
이 유형의 아이콘 내용 은 스타일 항목 에 정의 되 어 있 으 며 HTML 요 소 는 클래스 이름 을 통 해 연 결 됩 니 다.

Msg: {
  css: "#msg { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }\
     #msg:before { content: '\\e608'; }",
  xml: "<div id='msg'/>"
}

직접 참조 유 니 코드
이러한 인용 방식 은 이전 과 본질 적 으로 다 르 지 않 습 니 다.아이콘 내용 을 스타일 항목 에서 보기 항목 으로 옮 길 뿐 입 니 다.

Home: {
  css: "#home { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }",
  xml: "<div id='home'>&#xe609;<div/>"
}

다음 예제 에 서 는 글꼴 아이콘 을 참조 하 는 두 가지 방식 을 보 여 줍 니 다.주의 하 세 요.이 예 는 스타일 항목 에서 호환성 과 관련 된 내용 을 간소화 하 였 으 니 자세 한 내용 은 세트 소스 코드 를 찾 아 보 세 요.

Example: {
  css: "@font-face { font-family: 'iconfont'; url('iconfont.ttf') format('truetype');}\
     #msg, #home { font-family: 'iconfont'; font-style:normal; }\
     #example > * { display: inline-block; padding: 10px; background: #F9F9F9; }",
  xml: "<div id='example'>\
      <Msg id='msg'/>\
      <Home id='home'/>\
     </div>"
}

SVG 아이콘
마지막 으로 SVG 아이콘 을 어떻게 봉인 하고 사용 하 는 지 살 펴 보 자.xmlplus 에서 SVG 아이콘 은 추천 하 는 아이콘 사용 형식 으로 코드 를 직접 삽입 할 수 있 으 며 관련 파일 을 추가 로 참조 하지 않 아 도 됩 니 다.
xlink:href 참조
이런 방식 에 대해 서 는 우선 svg 아이콘 집합 이 필요 합 니 다.그 내용 은 아래 와 같 습 니 다.

<svg>
  <symbol id="icon" width='48px' height='48px' viewBox='0 0 24 24'>
    <g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\
  </symbol>
  <!--        symbol -->
</svg>

svg 아이콘 집합 은 두 가지 존재 방식 이 있 습 니 다.하 나 는 파일 형식 으로 존재 합 니 다.이 때 xlink:href 속성 값 은 파일 의 url 을 명확 하 게 밝 혀 야 합 니 다.다음은 예제 입 니 다.

<svg>
  <use xlink:href='http://example.com/file.svg#icon'/>\
</svg>

다른 형식 은 아이콘 집합 이 페이지 에 직접 존재 하 는 방식 을 페이지 내 참조 라 고 합 니 다.url 을 가리 키 지 않 고 해당 symbol 의 id 만 지정 하면 됩 니 다.

<svg>
  <use xlink:href='#icon'/>\
</svg>

svg 아이콘 에 대한 직접 패키지
xlink:href 를 통 해 아이콘 을 참조 하 는 것 보다 xmlplus 의 구성 요소 화 기술 을 사용 하여 직접 패 키 징 하 는 것 이 좋 습 니 다.다음 SVG 아이콘 구성 요 소 를 보십시오.

Icon: {
  xml: "<svg width='48px' height='48px' viewBox='0 0 24 24'>\
      <g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\
     </svg>",
  fun: function (sys, items, opts) {
    this.attr("fill", '' + this);
  }
}

이것 은 갈고리 모양 아이콘 으로 구성 요소 에는 보기 항목 과 함수 항목 성분 만 포함 되 어 있 습 니 다.함수 항목 의 내용 에 따라 아이콘 색상 은 구성 요소 인 스 턴 스 의 id 속성 값 으로 표 시 됩 니 다.이 아이콘 을 어떻게 사용 하 는 지 살 펴 보 겠 습 니 다.

Example: {
  css: "#example > * { padding: 10px; background: #F9F9F9; }\
     #example > *:hover { fill: #fff; background: #563d7c; }",
  xml: "<div id='example'>\
      <Icon id='red'/>\
      <Icon id='green'/>\
      <Icon id='blue'/>\
     </div>",
  fun: function (sys, items, opts) {
    sys.example.on("click", "*", e => console.log(this + " clicked"));
  }
}

이 예제 에 서 는 세 개의 서로 다른 색상 의 아이콘 을 보 여 주 었 으 며 아이콘 의 클릭 이 벤트 를 검색 하여 브 라 우 저 콘 솔 을 열 었 습 니 다.서로 다른 아이콘 을 클릭 하면 해당 하 는 출력 을 볼 수 있 습 니 다.
또한 SVG 아이콘 의 패 키 징 방식 은 SVG 텍스트 를 URL 인 코딩 을 거 친 후 img 의 src 속성 이나 스타일 background-image 에 직접 보 여 줍 니 다.아래 처럼.

Icon: {
  css: "#icon {width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...")},
  xml: "<div id='icon'/>"
}

이런 방식 은 이전 방식 에 비해 두 가지 단점 이 있다.하 나 는 SVG 의 원본 파일 을 볼 수 없다 는 것 이다.둘째,SVG 아이콘 에 대한 조작 권 을 잃 었 습 니 다.물론 이런 방식 도 못 쓰 는 것 은 아니다.아이콘 에 대한 후속 작업 이 필요 없다 면 이런 방식 을 사용 하 는 것 도 받 아들 일 수 있다.또한 이와 비슷 한 아이콘 사용 방식 은 아이콘 base 64 인 코딩 후의 내장 참조 입 니 다.다음은 간단 한 시범 이다.

Icon: {
  xml: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />"
}

이 방식 은 이전 SVG 아이콘 의 패 키 징 방식 과 유사 하 다.그러나 SVG 아이콘 구성 요소 의 직접 패키지 에 비해 아이콘 에 대한 조작 권 을 잃 었 습 니 다.
이 시 리 즈 는 xmlplus 프레임 워 크 를 기반 으로 합 니 다.xmlplus 에 대해 잘 모 르 면 방문 할 수 있 습 니 다www.xmlplus.cn.여기에 참고 할 수 있 는 상세 한 입문 문서 가 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.