当前位置:   article > 正文

Vue svg 及 图标库(iconify)使用_vue图标库

vue图标库

iconify介绍

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

在vite中使用iconify

安装

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

使用

<script setup>
import { Icon } from '@iconify/vue';
</script>
<template>
  <Icon icon="ep:add-location" />
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

svg图标的使用

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

安装

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

配置

// 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
      })
    ],
  };
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
//main.js
import 'virtual:svg-icons-register' //导入全局的svg图标
  • 1
  • 2

使用

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/606123
推荐阅读
相关标签
  

闽ICP备14008679号