文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3怎么使用svg图标

2023-07-05 16:07

关注

今天小编给大家分享一下vue3怎么使用svg图标的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

方式1使用在线链接访问

在iconfont找到自己的项目的图标选择Symbol获取在线链接

vue3怎么使用svg图标

在vue3项目中找到public的index.html进行script进行引入

vue3怎么使用svg图标

打开浏览器看:这样就会自动注入到body下

vue3怎么使用svg图标

在项目直接使用

   //控制图标的大小   <svg >      <use href="#icon-shanchu" rel="external nofollow" ></use>    </svg>

显示出了删除的图标

vue3怎么使用svg图标

封装的写法(上面的代码写着太重复下面进行封装)

新建一个专门获取svg图标的组件

vue3怎么使用svg图标

icon.vue (svg/index.vue)

 <template>  <div>    <svg :>      <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   :  name="icon-shanchu"  ></icon>    <icon   :  name="icon-shanchu"  ></icon>  </div></template><script setup>import { ref } from "vue";import icon from "../assets/svg/index.vue";</script><style lang="scss"> </style>

vue3怎么使用svg图标

假如你既引用了iconfont的图标也自定义了图标:直接放在一起根据传输的name指定使用哪一个图标

icon.vue (svg/index.vue)

<template>  <div>    <svg :>      <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  :   name="icon-shanchu" ></icon>    <icon  :  name="icon-shanchu1"  ></icon>    <icon : name="more"></icon>  </div></template><script setup>import { ref } from "vue";import icon from "../assets/svg/index.vue";</script><style lang="scss"> </style>

vue3怎么使用svg图标

假如你是复制的iconfont官网的图标svg的代码:

vue3怎么使用svg图标

vue3怎么使用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>

效果如下:

vue3怎么使用svg图标

我们还可以把上面的代码进行改造直接使用在 icon.vue (svg/index.vue)改造

vue3怎么使用svg图标

 <template>  <div class="home">    <icon      :      name="icon-shanchu"    ></icon>    <icon      :      name="icon-shanchu1"    ></icon>    <icon : 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 : 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图标”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯