vite2 + vue3 使用svg图标

最新推荐文章于 2024-05-28 08:50:04 发布

Hello攻城狮

最新推荐文章于 2024-05-28 08:50:04 发布

阅读量251

点赞数 1

分类专栏： vue3 vite 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42912237/article/details/126498520

版权

vue3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vite

1 篇文章 0 订阅

订阅专栏

首先创建一个svgBuilder.js

import { readFileSync, readdirSync } from 'fs'

let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g

const hasViewBox = /(viewBox="[^>+].*?")/g

const clearReturn = /(\r)|(\n)/g

function findSvgFile (dir) {
  const svgRes = []
  const dirents = readdirSync(dir, {
    withFileTypes: true,
  })
  for (const dirent of dirents) {
    if (dirent.isDirectory()) {
      svgRes.push(...findSvgFile(dir + dirent.name + '/'))
    } else {
      const svg = readFileSync(dir + dirent.name)
        .toString()
        .replace(clearReturn, '')
        .replace(svgTitle, (_, $2) => {
          let width = 0
          let height = 0
          let content = $2.replace(clearHeightWidth, (_, s2, s3) => {
            if (s2 === 'width') {
              width = s3
            } else if (s2 === 'height') {
              height = s3
            }
            return ''
          })
          if (!hasViewBox.test($2)) {
            content += `viewBox="0 0 ${width} ${height}"`
          }
          return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`
        })
        .replace('</svg>', '</symbol>')
      svgRes.push(svg)
    }
  }
  return svgRes
}

export const svgBuilder = (path, perfix = 'icon') => {
  if (path === '') return
  idPerfix = perfix
  const res = findSvgFile(path)
  return {
    name: 'svg-transform',
    transformIndexHtml (html) {
      return html.replace(
        '<body>',
        `
          <body>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
              ${res.join('')}
            </svg>
        `,
      )
    },
  }
}

在vite.config.js中导入svgBuilder.js

 plugins: [
      vue(),
      [svgBuilder('./src/assets/svg/')] // 这里已经将src/icons/svg/下的svg全部导入，无需再单独导入
    ]

创建一个svg-icon组件

<template>
  <div :title="title" class="container-icon" :style="{width: iconSize + 'px',height: iconSize + 'px',}">
    <svg :class="['svg-icon', $attrs.class]" :style="{width: iconSize + 'px',height: iconSize + 'px',}" aria-hidden="true">
      <use :xlink:href="'#icon-' + iconName" :fill="color" :title="title"/>
    </svg>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    iconName: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    iconSize: {
      type: [Number, String],
      default: 14,
    },
  },
  setup () {
    return {}
  },
})
</script>

<style scoped>
.container-icon{
  display: inline-block;
  margin: 0 5px;
}
.svg-icon {
  vertical-align: middle;
  fill: currentColor;
  display: block;
}
</style>

在main.js中引入svg-icon

import SvgIcon from './components/svg-icon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
app.mount('#app')

使用

 <SvgIcon :iconName="'icon-upload'"  @click="handleUpload(scope.row)" :iconSize="20"></SvgIcon>

Hello攻城狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vite2 + vue3 使用svg图标

vite2+vue3使用svg图标
复制链接

扫一扫

专栏目录

vite2 + vue3 使用svg图标

“相关推荐”对你有帮助么？