vue3使用svg图标的多种方式总结
更新时间：2023年03月24日 09:49:30 作者：@小朱呀路
svg图片在项目中使用的非常广泛,下面这篇文章主要给大家介绍了关于vue3使用svg图标的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
方式1使用在线链接访问
在iconfont找到自己的项目的图标选择Symbol获取在线链接
2：在vue3项目中找到public的index.html进行script进行引入
打开浏览器看：这样就会自动注入到body下
在项目直接使用
//控制图标的大小
<svg style="width: 10px; height: 10px">
<use href="#icon-shanchu" rel="external nofollow" ></use>
</svg>
显示出了删除的图标
封装的写法(上面的代码写着太重复下面进行封装)
1:新建一个专门获取svg图标的组件
icon.vue (svg/index.vue)
<template>
<div>
<svg :style="style">
<use :href="names" rel="external nofollow" rel="external nofollow" ></use>
</svg>
</div>
</template>
<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
name: {
type: String,
default: "",
},
style: {
type: Object,
default: () => {
return {
width: 10,
height: 10,
color: "",
};
},
},
});
const names = `#${props.name}`;
</script>
<style lang="scss" scoped></style>需要显示图标的界面
<template>
<div class="home">
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon>
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon>
</div>
</template>
<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
</style>
假如你既引用了iconfont的图标也自定义了图标：直接放在一起根据传输的name指定使用哪一个图标
icon.vue (svg/index.vue)
<template>
<div>
<svg :style="style">
<use :href="names" rel="external nofollow" rel="external nofollow" ></use>
</svg>
// 自定义的图标
<svg width="0" height="0">
<defs>
<symbol id="more" viewBox="0 0 100 100">
<circle
r="5"
cx="20"
cy="25"
fill="transparent"
stroke="green"
></circle>
<circle r="5" cx="20" cy="50" fill="currentColor"></circle>
<circle r="5" cx="20" cy="75" fill="currentColor"></circle>
<line
x1="40"
y1="25"
x2="90"
y2="25"
stroke-width="8"
stroke="currentColor"
></line>
<line
x1="40"
y1="50"
x2="90"
y2="50"
stroke-width="8"
stroke="currentColor"
></line>
<line
x1="40"
y1="75"
x2="90"
y2="75"
stroke-width="8"
stroke="currentColor"
></line>
</symbol>
</defs>
</svg>
</div>
</template>
<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
name: {
type: String,
default: "",
},
style: {
type: Object,
default: () => {
return {
width: 10,
height: 10,
color: "",
};
},
},
});
const names = `#${props.name}`;
</script>
<style lang="scss" scoped></style>使用：
<template>
<div class="home">
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon>
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu1" ></icon>
<icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon>
</div>
</template>
<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
</style>
假如你是复制的iconfont官网的图标svg的代码：
你直接cv到项目也可以直接使用：
<svg
t="1673881805558"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1076"
width="200"
height="200"
>
<path
d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z"
p-id="1077"
></path>
</svg>
效果如下：
我们还可以把上面的代码进行改造直接使用在 icon.vue (svg/index.vue)改造
<template>
<div class="home">
<icon
:style="{ width: 10, height: 10, color: 'red' }"
name="icon-shanchu"
></icon>
<icon
:style="{ width: 10, height: 10, color: 'red' }"
name="icon-shanchu1"
></icon>
<icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon>
<svg
t="1673881805558"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1076"
width="200"
height="200"
>
<path
d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z"
p-id="1077"
></path>
</svg>
//改造好了直接使用
<icon :style="{ width: 20, height: 20, color: 'red' }" name="icon"></icon>
</div>
</template>
<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
</style>
总结
到此这篇关于vue3使用svg图标的多种方式总结的文章就介绍到这了,更多相关vue3使用svg图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-08-08
Day.js库本身专注于简化JavaScript日期和时间的操作,它的API设计直观,且功能强大,可以方便地格式化日期、添加或减去时间间隔、比较日期等,本文主要介绍了Vue利用dayjs封装实现时间实时刷新,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了解决Vue项目中tff报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue中子组件如何间接修改父组件传递过来的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了如何使用crypto-js对文件上传下载进行加密处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要给大家介绍了关于axios如何取消重复无用的请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
VUE项目启动没有问题但代码中script标签有蓝色波浪线标注
这篇文章主要给大家介绍了关于VUE项目启动没有问题但代码中script标签有蓝色波浪线标注的相关资料,文中将遇到的问题以及解决的方法介绍的非常详细,需要的朋友可以参考下2023-05-05
前端项目vue3/React如何使用pako库解压缩后端返回gzip数据
pako是一个流行的JS库,用于在浏览器中进行数据压缩和解压缩操作,它提供了对常见的压缩算法的实现,使开发者能够在客户端上轻松进行数据压缩和解压缩,这篇文章主要介绍了前端项目vue3/React使用pako库解压缩后端返回gzip数据,需要的朋友可以参考下2024-07-07
最新评论