学完之后, 引入svg图标就这么简单, 快点学起来!!!
<cp-icon name="login-eye-on"></cp-icon>
<cp-icon name="login-eye-off"></cp-icon>
把 icons 文件夹中的图标打包成 svg 雪碧图,参考文档。
安装插件
pnpm install vite-plugin-svg-icons -D
配置插件
vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// #1
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// #2
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
dts: false,
resolvers: [VantResolver({ importStyle: false })]
}),
// #3
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons')]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
从main.ts导入
`import 'virtual:svg-icons-register`
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores'
// mark
import 'virtual:svg-icons-register'
import 'vant/lib/index.css'
import './styles/main.scss'
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')
测试使用 svg 精灵地图
views/Login/index.vue
<svg aria-hidden="true">
<!-- #icon-文件夹名称-图片名称 -->
<use href="#icon-login-eye-off" />
</svg>
图标组件-封装 svg 组件
目标
把 svg 标签的使用封装成组件,完成密码的可见切换功能。
组件
<script setup lang="ts">
// 提供 name 属性即可
defineProps < {
name: string
} > ()
</script>
<template>
<svg aria-hidden="true" class="cp-icon">
<use :href="`#icon-${name}`" />
</svg>
</template>
<style lang="scss" scoped>
.cp-icon {
// 和 font-size 一样大
width: 1em;
height: 1em;
}
</style>
类型 types/components.d.ts
。
mport CpNavBar from '@/components/CpNavBar.vue'
import CpIcon from '@/components/CpIcon.vue'
declare module 'vue' {
interface GlobalComponents {
CpNavBar: typeof CpNavBar
CpIcon: typeof CpIcon
}
}
测试使用
<cp-icon name="login-eye-on"></cp-icon>
<cp-icon name="login-eye-off"></cp-icon>