vite 自定义封装图标

原创已于 2023-11-18 11:22:03 修改 · 544 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-11-18 10:46:45 首次发布

vite 专栏收录该内容

2 篇文章

订阅专栏

一、当前版本

"vite": "^4.2.0",
"vue": "^3.2.47",

二、安装插件


npm i vite-plugin-svg-icons -D

三、在vite.config文件中配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    }),
  ],
}

踩坑点：path is not defined

解决方法分ts与js不同操作↓

Ts方案：(目前未尝试，找问题时顺道看到就先写上、、、)

原因：path模块是node.js内置的功能，但是node.js本身并不支持ts
解决方案：安装@types/node

npm install @types/node -D

Js方案：(目前已解决)

使用前先导入，path报错就解决了

import path from 'path';

四、准备需要用的图标

方式1.蓝湖中下载svg格式的图标

方式2.进入iconfont-阿里巴巴矢量图标库下载svg

五、将下载好的svg图放入文件夹

1.创建一个新的文件夹名为icons，最终放在svg文件里

注意这里svg图标的路径要跟vite.config文件中缓存图标文件夹的路径一致

六、封装组件

在components文件夹下创建一个名为SvgIcon的文件

index.vue文件中进行都自定的图标封装，代码入下


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

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'SvgIcon',
  props: {
    iconName: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#fff',
    },
    iconSize: {
      type: [Number, String],
      default: 16,
    },
  },
  setup() {
    return {};
  },
});
</script>

<style scope>
.svg-icon {
  fill: currentColor;
  vertical-align: middle;
}
</style>

七、在mian文件中注册

import { createApp } from 'vue'
import App from './App.vue'


// 需要全局引入再添加
import svgIcon from './components/SvgIcon/index.vue' // 全局svg图标组件

//引入vite-plugin-svg-icons的脚本
import 'virtual:svg-icons-register';


const app = createApp(App);
app.component('svg-icon', svgIcon)