碼上快樂

相關內容    簡體    繁體

svg在vue里面的使用,封裝一個svg組件

本文轉載自   查看原文   2018-07-29 20:01   14600    Vue

前言

　　關於svg的介紹請參考張鑫旭老師的博客：未來必熱：SVG Sprite介紹

　　svg的優缺點：

　　　　優點：　　　

  • 支持多色圖標，不受單色限制。
  • 可以通過font-size,color來控制樣式
  • 可以利用css實現動畫
  • 縮放不失真
  • 減少http請求

　　　　缺點：

  • ie9+以上才支持
  • 瀏覽器渲染svg的性能一般，不如png

　font庫，可以去阿里巴巴矢量圖

普通使用方法

　　第一步：引入項目下面生成的symbol代碼：

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

　　第二步：加入通用css代碼（引入一次就行）：

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

　　第三步：挑選相應圖標並獲取類名，應用於頁面：

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

　　詳細如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>svg使用</title>
  <script src="./iconfont.js"></script>
  <style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
  </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-jiantoushang"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-jiantouyou"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-jiantouxia"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-saoyisao"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-wode"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xiaoxi"></use>
    </svg>
</body>
</html>

 

在vue中封裝一個組件

　　第一步：

　　　　在vue腳手架生成的文件夾下的src/components創建一個Svg
Icon.vue文件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style>
.svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
</style>

 

　　第二步：

　　　　在src目錄下創建icons文件下，文件夾下面有svg文件夾和index.js文件

　　　　　　-svg文件夾：存放每個svg文件

　　第三步：

　　　　使用和安裝svg-sprite

　　　　這里使用webpack loader中的一個svg-sprite-loader，可以將多個svg打包成svg-spite

　　　　1、安裝

npm install svg-sprire-loader --save-dev

　　　　2、配置build/webpack.base.conf.js

　　　　　　

　　　　　在前面添加

{
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
          symbolId: "icon-[name]"
        }
 },

　　　　　　詳細如下：

{
        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]')
        }
 },

　　

　　第四步：自動導入

　　　　自動導入需要用到webpack的require context

// require.context的簡單介紹
require.context("./file", false, /.file.js$/);
這行代碼就會去 file 文件夾（不包含子目錄）下面的找所有文件名以 .file.js 結尾的文件能被 require 的文件。就是說可以通過正則匹配引入相應的文件模塊。

// require.context有三個參數：
directory：說明需要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達式

　　　　在src/icons/index.js使用require context

import Vue from 'vue'
import SvgIcon from '../components/SvgIcon.vue'

Vue.component('svg-icon', SvgIcon)

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

 　　第五步：在main.js中引入

import '@/icons'

 　　自此，已經完成組件的封裝

　　在src/icons/svg下面的各個文件

　　--user.svg

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993891882" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z" p-id="7987"></path></svg>

　　--password.svg

 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994678729" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9229" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z" p-id="9230"></path></svg>

　　 

　　完整項目github，點擊 

 

　　###打包之前必須修改路徑，不然不會顯示svg圖

　　

在項目目錄下
    -config
        -index.js
              
        assetsPublicPath修改為：
        assetsPublicPath: './',

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue3 封裝svg組件，全局使用svg vue中封裝svg-icon組件並使用 vue中封裝svg-icon組件並使用 svg組件封裝 elementUI 封裝 SVG 組件 vue項目中使用 SVG 組件 使用vue組件加載SVG圖片步驟 在Vue中使用svg圖標即封裝自定義svg-icon標簽 在vue中使用svg vue 中使用svg
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM