VUE있어서 사용 SVG

첫 번째 방법

SRC의 폴더 아이콘을 만든 다음 SVG와하는 index.js를 만들
SVG 폴더는 모든 SVG를 넣어

구성 요소 SvgIcon 코드를 다음과 같이 구성되어 생성

<템플릿> 
  <SVG : 클래스 = "svgClass"아리아 숨겨진 = "진정한"> 
    <사용 : 인 XLink : HREF = "iconName"> </ 사용> 
  </ SVG> 
</ 템플릿>

<script> 
수출 기본 { 
  이름 : 'SVG-아이콘', 
  소품 : { 
    iconClass : { 
      유형 : 문자열, 
      필수 : 사실은 
    }, 
    클래스 이름은 { 
      유형 : 문자열 
    } 
  }, 
  계산 : { 
    iconName () { 
      반환`# 아이콘 - $ {this.iconClass}` 
    }, 
    svgClass () { 
      경우 (this.className) { 
        반환 'SVG-아이콘'+ this.className 
      } 다른 { 
        복귀 'SVG-아이콘' 
      } 
    } 
  } 
} 
</ script>

<스타일 스코프> 
.svg - 아이콘 { 
  폭 : 1em; 
  높이 : 1em; 
  수직 정렬 : -0.15em; 
  입력 : CurrentColor에를; 
  오버 플로우 : 숨겨진; 
} 
</ 스타일>

하는 index.js 아이콘의 전역 어셈블리에 등록

<! - 첫 번째 구성 요소를 도입 -> 
가져 오기 뷰에서 'VUE' 
SvgIcon에서 가져 오기 '@ / 부품 / SvgIcon'// SVG 요소

<! - 구성 요소 가입 ->

Vue.component ( 'SVG-아이콘', SvgIcon)

사용 코드

1 2	<! - SVG 이름이 사용하는 이름입니다 -> <아이콘 아이콘-SVG-클래스 = "이름"> </ SVG-아이콘>

또한 사용이 직관적이지 JS SVG 코드의 단점에 의해 생성되기 때문에

당신은 수요에로드 할 수 없습니다
사용자 정의 가난한
비우호적 추가

우리는 SVG SVG-스프라이트 로더를 사용하여 더 달성하기 위해 포장 그래서

큰 상자

VUE 방법을 사용 SVG

첫째, SVG-스프라이트 로더를 설치
1

npm install svg-sprite-loader --save

在vue的build > webpack.base.conf.js中添加svg的模块

{
    test: /.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')],
    options: {
      symbolId: 'icon-[name]'
    }
},
{
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/icons')], // 这个方法是不包含不打包
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},

自动导入在index.js中添加如下代码

1
2
3

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
requireAll(req)

最后使用

1
2
3

<!--icon-class是所使用的svg名-->
<!--class-name是图标的类名控制-->
<svg-icon icon-class='language' class-name="card-panel-icon" />

10 .重点是要引入

1	import '@/icons'

学习地址

第二种方法

与svg同级创建一个svg文件夹，放入需要的svg
使用vue-svgicon
通过文档实现svg的使用

简单用法

npm install vue-svgicon --save-dev 
<!--配置-->
"svg": "vsvg -s ./static/svg/src -t ./src/icons"

<!--main.js中-->
import * as svgicon from 'vue-svgicon'
Vue.use(svgicon, {
  tagName: 'svgicon'
})

<! - home.vue中使用-> 
<svgicon 이름 = "VUE"> </ svgicon>

<! - 실행 -> 
NPM RUN의 SVG

첫 번째 방법

第二种方法

추천