뷰는 프로젝트 SVG 아이콘에 사용

사용자 정의 색상 사용자 정의 크기 장점과 SVG 사진. 알리 아이콘 라이브러리는 SVG 사진을 다운로드 할 수 있습니다. 
그런 다음 우리는 SVG 그림을 사용하는 방법의 VUE 프레임 워크는 
이 시간 웹팩 플러그 SVG를 사용 -sprite- 로더 

첫째는 자연 설치하는 것입니다 

NPM 내가 SVG -sprite - 로더 - 저장이 


생성 SVG 파일 디렉토리 / SRC / 아이콘 / SVG SVG 파일은 모두가 / SRC / iconsThe / 내부에 위치 하는 index.js 

// 하는 index.js 
뷰 'VUE'에서 가져 오기 
에서 가져 오기 SvgIcon '@ / 부품 / SvgIcon'
 / * require.context ( "테스트를 ./"거짓 , /.test.js$/); 
    코드 줄은 () 아래에 서브 디렉토리를 포함하지 않는 테스트 폴더를 요구할 수 .test.js 끝나는 파일 이름으로 모든 파일을 찾아 갈 것입니다. 
    더 간단 우리가 정규 경기를 통해 해당 파일 모듈을 도입 할 수 있다고합니다. 
     : require.context는 세 개의 매개 변수가 
     있는 디렉토리 내용을 검색 할 
     useSubdirectories을 : 하위 디렉토리를 검색할지 여부를
     정규 표현식 : 정규 표현식 일치하는 파일 * / 
//글로벌 등록 
Vue.component ( 'SVG-아이콘' , SvgIcon) 
const를 requireAll = requireContext => requireContext.keys ().지도 (requireContext) 
const를 REQ = require.context ( './ SVG', false로 , /\.svg$ / ) 
requireAll (REQ)이 


파일 webpack.base.conf.js 구성 규칙에 추가되었습니다 

       // webpack.base.conf.js 
      { 
        : 테스트 /\.svg$/ , 
        로더 : "스프라이트가-SVG-로더 떨어졌다" , 
        은 다음과 같습니다 : [path.resolve은 (__ dirname은, '../src/icons/svg')] // 폰트 아이콘 파일을 포함 
        // 옵션 { 
          // symbolId '아이콘 - [이름] //이 사실상 효력없는 기본 이름입니다 
        //} 
      } 


그런 다음 URL 수정 - 로더 구성 

       // webpack.base.conf.js 
      { 
        : 테스트 /\.(png|jpe?g|gif|svg)(\?.*)?$/ , 
        로더 : "URL-로더 " , 
        익스 클루 : [ 
          path.resolve (__이 dirname를, '../src/icons/svg을'), // 글꼴 아이콘 파일을 제외 
        ] 
        옵션 : { 
          제한 : 10000 , 
          이름 : utils.assetsPath ( "IMG / [이름] . [해시 :. 7] [EXT]. " ) 
        } 
      } 


VUE 조립 SVG 만들기 - 아이콘

<! - @ / 구성 요소 / SvgIcon ->  
<템플릿>
    <SVG : 클래스 = "svgClass는"아리아 - 숨겨진 = "true"를 @click = "$ 방출 ( '클릭')"> 
        <사용 : 인 XLink : HREF = "iconName" > </ 사용> 
    </ SVG> 
</ 템플릿> 

<script> / * * 
 * SVG图标组件
 * iconClass = "图标名称" 
 * 클래스 명 = "风格名称" * / 
내보내기 기본 { 
  이름 : 'SVG-아이콘' , 
  소품 : { 
    iconClass : {유형 : 문자열, 필수 : 사실 }, 
    클래스 이름 : {형태 : String} 
  }, 
  계산 :{ 
    iconName () { 반환 `을 # $ { 이 .iconClass}` 
    }

 
      iconClass}` 
    svgClass () { 
      경우 ( 이 .ClassName과) {
         반환 'SVG-아이콘'+ 은이 .ClassName과 
      } 다른 {
         복귀 'SVG-아이콘' 
      } 
    } 
  } 
}
 </ SCRIPT> 

<스타일 범위> 
.svg - 아이콘 { 
  폭 : 1em; 
  높이 : 1em; 
  수직 -align : -0 .15em; 
  채우 CurrentColor에, 
  오버플로 : 숨겨진; 
}
 </ 스타일>
 


main.js에 통합 

가져 오기 './icons/index.js은' 


우리는 VUE에서 사용할 수 있도록 형식은 다음

 <SVG-아이콘 아이콘 클래스 = "SVG의 파일 이름"/>
뷰는 프로젝트 SVG 아이콘에 사용

추천
