svg图标最简单的使用方式
简单的用法
-
以阿里巴巴的图标举例
1. 复制图标的svg代码
2. 新建个存放svg图标的目录,新建.vue
文件
3. 在<template>
标签内粘贴svg
的代码
<template>
<svg t="1700026328900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4071" width="200" height="200">
<path d="M512 128a288.64 288.64 0 0 1 288 288c0 132.48-203.52 384-288 465.28-84.48-78.72-288-332.8-288-465.28A288.64 288.64 0 0 1 512 128m0-64a352 352 0 0 0-352 352c0 192 320 544 352 544s352-349.44 352-544A352 352 0 0 0 512 64z" fill="#2C2C2C" p-id="4072"></path>
<path d="M512 576a160 160 0 1 1 160-160A160 160 0 0 1 512 576z m0-256a96 96 0 1 0 96 96A96 96 0 0 0 512 320z" fill="#2C2C2C" p-id="4073"></path>
<path d="M256 896m32 0l448 0q32 0 32 32l0 0q0 32-32 32l-448 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#2C2C2C" p-id="4074"></path>
</svg>
</template>
4. 在代码中也可以调整颜色和大小
5. 在组件中引用
<template>
<-- 假装这里有代码-->
<navigation-icon class="icon"></navigation-icon>
<-- 假装这里也有代码-->
</template>
<script>
import navigationIcon from '@/svg/navigation_icon.vue'
</script>
<style>
<--设置样式,调整大小等,这里无法调整颜色-->
.icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
</style>
6. svg
做的图标要独占一行,使用布局将它安排到合适的地方
复杂的用法:封装Svg组件(ts语法)
1. 安装SVG依赖插件
npm install vite-plugin-svg-icons -D
2. 在vite.config.ts
中配置插件
- 需要指定svg图标所在目录
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// svg图标的目录
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
})
],
resolve: {
alias: {
// '@': fileURLToPath(new URL('./src', import.meta.url))
"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src
}
}
})
2. svg封装为全局组件
在src/components/SvgIcon目录下创建一个index.vue
文件,内容如下:
<template>
<div>
<svg :style="{ width: width, height: height }">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</div>
</template>
<script setup lang="ts">
defineProps({
//xlink:href属性值的前缀
prefix: {
type: String,
default: '#icon-'
},
//svg矢量图的名字
name: String,
//svg图标的颜色
color: {
type: String,
default: ""
},
//svg宽度
width: {
type: String,
default: '16px'
},
//svg高度
height: {
type: String,
default: '16px'
}
})
</script>
<style scoped></style>
在src/components/
目录下创建一个index.ts
文件:用于注册components文件夹内部全部全局组件!!!
import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
install(app: App) {
Object.keys(components).forEach((key: string) => {
app.component(key, components[key]);
})
}
}
3. 在main.js
导入
- 引入
src/components/index.ts
文件,通过app.use方法安装自定义插件
import 'virtual:svg-icons-register'
import gloablComponent from './components/index';
app.use(gloablComponent);
如果import 'virtual:svg-icons-register'
这个地方报错可能缺少fast-glob
npm i fast-glob -D
4. 使用
在任一vue组件中使用
<template>
<SvgIcon name="copyright" color="red" width="100px" height="100px"></SvgIcon>
</template>
5. 目录结构
6.颜色无法修改
找到图标的svg
文件