在vue中使用svg
阿新 • • 發佈:2020-09-17
在vue重使用svg
- svg的好處
- 向量性(無論圖片放多大,都不會出現鋸齒狀模糊)
- 利於seo
- 步驟
- 1、安裝依賴:
npm install svg-sprite-loader --save-dev
- 2、配置vue-cli
chainWebpack(config) { // 配置svg config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() }
- 3、在src/components/svgIcon下新建svg元件
<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName"/> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: ''} }, computed: { iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } } } </script> <style scoped> .svg-icon { width: 10em; height: 10em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
- 4、在src下新建icons資料夾,及icons資料夾下svg資料夾、index.js檔案, index.js檔案內容如下
import Vue from 'vue' import SvgIcon from '@/components/svg'// svg component // register globally Vue.component('svg-icon', SvgIcon) const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)
- 5、在main.js中引入svg
import './assets/icons/index'
- 6下載svg圖片將svg圖片放在assets/icons/svg/下面
- 7、在頁面中使用
<div class="svg_box"> SVG圖示 <svg-icon icon-class="smile"></svg-icon> <svg-icon icon-class="cry"></svg-icon> </div>