Vue cli4導入svg

在建立vue cli項目時免不了的需要圖，這裡已導入阿里巴巴圖庫並且在導航內使用圖標為範例。

1. 安装 svg-sprite-loader 用來編譯svg的圖片

npm install --save-dev vue-svg-sprite-loader

2. 在根目錄創建vue.config.js，如果存在就不需要創建，並添加一下配置

module.exports = {
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  chainWebpack: (config) => {
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end()
  },
  }

3. 在main.js，註冊全局組件

import SvgIcon from './icons/Svgicon.vue';

const app = createApp(App).use(router)

app.mount('#app')
app.component('svg-icon', SvgIcon); // register globally，註冊全局組件

4. 在目錄下創建icon文件夾，並文件配置，在這裡將圖標(index.js)封裝成全局組件

/*require.context : 讀取指定目錄的所有文件
參數:
  第一個:目錄
  第二個:是否遍歷子級目錄
  第三個:定義遍歷文件規則，即要讀取甚麼樣的文件，此處為讀取已svg結尾的文件
*/

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

5. 封裝圖標

<template>
  <div v-if="isExternal"
       :style="styleExternalIcon"
       class="svg-external-icon svg-icon"
       v-bind="$attrs" />
  <svg
       :class="svgClass"
       aria-hidden="true"
       v-bind="$attrs">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import { computed } from 'vue';
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  setup(props) {

    const isExternal = computed(() => {
      return /^(https?:|mailto:|tel:)/.test(props.iconClass);
    })

    const iconName = computed(() => {
      return `#icon-${props.iconClass}`;
    })

    const svgClass = computed(() => {
      if (props.className) {
        return `svg-icon ${props.className}`
      }
      return 'svg-icon'
    })

    const styleExternalIcon = computed(() => {
      return {
        mask: `url(${props.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
      };
    })

    return {
      isExternal,
      iconName,
      svgClass,
      styleExternalIcon
    }
  }
}
</script>

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

.svg-external-icon {
  background-color: currentColor;
  display: inline-block;
  mask-size: cover !important;
}
</style>

5-1. 有時候不同場景對於圖標的大小需求跟顏色會不同，因此我們可以在scss的地方利用class來調節大小顏色的不同

<style lang="scss" scoped>
.svg-icon{
  width: 1rem;
  height: 1rem;
  fill:currentColor;
  color:red;
  &.font12{
    font-size: 12px;
  }
  &.font24{
    font-size: 24px;
  }
}
</style>

6. 調用圖標組件，在需要的地方插入即可

   <svg-icon iconClass="member" className="member">