집 > 기사 > 웹 프론트엔드 > Vue에서 사용자 정의 아이콘을 사용하는 방법

Vue에서 사용자 정의 아이콘을 사용하는 방법

이번에는 vue에서 사용자 정의 아이콘 아이콘을 사용하는 방법을 보여 드리겠습니다. vue에서 사용자 정의 아이콘 아이콘을 사용할 때 주의 사항은 무엇입니까?

우선 ElementUI가 제공하는 아이콘이 너무 적기 때문에 추가할 수 있는 벡터 이미지를 찾아야 합니다. 다음 방법이 간단하고 이해하기 쉽습니다. 여러분

렌더링:

알리바바 벡터 아이콘 관리, iconfont

사용 방법: 계정에 로그인하고 필요한 아이콘을 찾아 장바구니에 추가하세요

그런 다음 프로젝트에 추가하세요

그런 다음 코드를 로컬

에 다운로드하세요.

코드 파일을 다운로드한 다음 압축을 풀면 이 목록이 나타납니다

HTML 파일을 열고 메서드를 인용하세요. tutorial

함정을 추가하기 위해 이전에 스타일 태그에 @import ""를 생각했지만 계속 오류가 발생했습니다. 많은 방법을 시도했지만 여전히 효과가 없고 문제가 복잡합니다

1단계: 글꼴 클래스 코드를 소개합니다. index.html:

<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >

2단계: 해당 아이콘을 선택하고 클래스 이름을 얻은 후 페이지에 적용합니다:

<i class="iconfont icon-xxx"></i>

특징:

좋은 호환성, ie8+ 및 모든 최신 브라우저를 지원합니다.

유니코드에 비해 의미가 명확하고 쓰기가 더 직관적입니다. 이 아이콘이 무엇인지 쉽게 알 수 있습니다.

클래스는 아이콘을 정의하는 데 사용되므로 아이콘을 교체하려면 클래스에서 유니코드 참조만 수정하면 됩니다.

그러나 여전히 글꼴을 사용하기 때문에 다중 색상 아이콘은 여전히 지원되지 않습니다.

기호 참조 1단계: html에 기호 코드 삽입:

<script src="./iconfont.js"></script>

2단계: 일반 CSS 코드 추가(한 번 삽입):

<style type="text/css">.icon 
{ 
 width: 1em; 
height: 1em; 
 vertical-align: -0.15em; 
 fill: currentColor; 
overflow: hidden;}</style>

3단계: 해당 아이콘을 선택하고 클래스 이름을 가져와 페이지에 적용:

<svg class="icon" aria-hidden="true"> 
<use xlink:href="#icon-xxx" rel="external nofollow" >
</use>
</svg>

이것은 미래의 주류이며 현재 플랫폼에서 권장되는 사용 방식이라고 해야 합니다. 관련 소개는 이 기사를 참조하세요. 이 사용법은 실제로 svg 모음입니다. 다른 두 가지와 비교하면 다음과 같은 특징이 있습니다.

다중 색상 아이콘을 지원하며 더 이상 단일 색상으로 제한되지 않습니다.
몇 가지 트릭을 통해 <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size<code><a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a> , color 코드를 통해 글꼴과 같은 지원 > , color를 사용하여 스타일을 조정합니다.
호환성이 좋지 않으며 ie9+ 및 최신 브라우저를 지원합니다.
브라우저 렌더링 svg의 성능은 평균 수준이며 png만큼 좋지 않습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!