element-plus icon的使用方式
- 安装 npm install @element-plus/icons-vue
- 在 main.js 中引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
- 使用方式
<el-icon class="is-loading"><Loading /></el-icon>
<Edit style="width: 1em; height: 1em" />
iconify icon的使用方式(2024)
- 安装 npm install --save-dev @iconify/vue
- 在main.js 注册 / 在页面中注册
import { Icon } from '@iconify/vue';
app.component('Icon', Icon)
- 使用
<Icon icon="twemoji:1st-place-medal" />
<Icon icon="twemoji:antenna-bars" />
**图标库:https://icon-sets.iconify.design
.svg 文件 当 icon 的使用方式
- 安装 npm install vite-svg-loader --save-dev
- 在 vite.config.js plugins 中注册
plugins: [svgLoader()]
- 在页面中使用
import IconCode from '@/icons/code.svg'
<IconCode style="width: 20px; height: 20px; background: purple" />
使用 vite-plugin-svg-icons 引入svg 的方式
- 安装 npm i vite-plugin-svg-icons -D
- 在main.js 引入
import 'virtual:svg-icons-register'
- 在components 创建一个 svgicon 的组件
<template>
<svg aria-hidden="true" :class="svgClass" :style="{ width: iconSize + 'px', height: iconSize + 'px' }" >
<use :xlink:href="symbolId" />
</svg>
</template>
<script setup>
const props = defineProps({
iconPrefix: {type: String,default: 'icon'},
iconName: {type: String, required: true},
iconSize: {type: [Number, String], default: 12 },
className: {type: String, default: ''}
})
const symbolId = computed(() => `#${props.iconPrefix}-${props.iconName}`)
const svgClass = computed(() => {
if (props.className) { return 'svg-icon ' + props.className} .
else { return 'svg-icon' }
})
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.2em;
fill: currentColor;
overflow: hidden;
}
</style>
- 在 vite.config.js 中注册
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
plugins:[
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
symbolId: 'icon-[name]'
})]
- 在页面中使用
<SvgIcon iconName="icon_1" style="width: 30px; height: 30px" />
<SvgIcon iconName="code" iconSize="30" />
<SvgIcon iconName="icon_1" />
使用 unplugin-icons 引入 svg icon图标
- 安装 npm i unplugin-icons -D
- 在 vite.config.js 中引入
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import IconsResolver from 'unplugin-icons/resolver'
- 在 Components.resolvers 中配置
Components({
dirs: ['./src/components/'],
extensions: ['vue'],
deep: true,
dts: false,
include: [/\.vue$/, /\.vue\?vue/],
directoryAsNamespace: true,
resolvers: [
ElementPlusResolver(),
IconsResolver({
customCollections: ['wm'],
enabledCollections: ['ep', 'twemoji']
})
]
}),
- 在 plugins 中注册 icons
Icons({
compiler: 'vue3',
autoInstall: true,
customCollections: {
wm: FileSystemIconLoader('./src/icons')
}
}),
- 在 页面中使用
<el-icon size="60">
<i-wm-icon_60 />
</el-icon>
<el-icon size="60">
<Icon icon="fluent:device-eq-20-filled" />
</el-icon>
<el-icon size="60">
<Icon icon="twemoji:ab-button-blood-type" />
</el-icon>