Vue svg 及 图标库(iconify)使用

iconify介绍

iconify是功能最丰富的图标框架。可以与任何图标库一起使用的统一图标框架。开箱即用的功能包括80多个图标集和超过70,000个图标
Vscode预览图标插件 Iconify IntelliSense

在vite中使用iconify

安装

#在组件可以快速使用所有图标,图标会通过在线导入
npm install --save-dev @iconify/vue 

使用

<script setup>
import { Icon } from '@iconify/vue';
</script>
<template>
  <Icon icon="ep:add-location" />
</template>

svg图标的使用

如果还是大量的使用到svg图标就需要使用到vite-plugin-svg-icons了
他可以帮助我们快速使用文件夹中svg图标，避免在代码在出现大量的svg的
代码

安装

npm install --save-dev vite-plugin-svg-icons

配置

// vite.config.js
import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 路径配置
const root = process.cwd()
function pathResolve(dir) {
  return resolve(root, '.', dir)
}
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        iconDirs: [resolve(root, "src/assets/svgs")],// svg 图标保存的位置 
        symbolId: 'icon-[dir]-[name]',// 指定symbolId格式
        svgoOptions: true
      })
    ],
  };
};

//main.js
import 'virtual:svg-icons-register' //导入全局的svg图标

使用

<template>
  <svg aria-hidden="true" class="cp-icon">
    <use href="`#icon-search" /> 
    <!-- svg路径：src/assets/svgs/search.svg -->
  </svg>
  <svg aria-hidden="true" class="cp-icon">
    <use href="`#icon-my-search" /> 
    <!-- svg路径：src/assets/svgs/my/search.svg -->
  </svg>
</template>

<script setup>
  // 查看全部svg的名称
  import ids from 'virtual:svg-icons-names' 
  console.log(ids);
</script>