第1种：通过vue-svgicon插件。

进入iconfont官网，选中图片-》“复制SVG代码（或直接下载svg文件）”-》在项目的icons/svg文件夹中新增xxx.svg文件（如no-data.svg），将之前复制的svg代码直接粘贴-》运行"npm run svg"命令，系统自动生成对应的xxx.ts声明文件-》在页面中通过svgicon组件（name = "xxx"）使用即可。

// main.ts
import SvgIcon from 'vue-svgicon'
Vue.use(SvgIcon, {
  tagName: 'svg-icon',
  defaultWidth: '1em',
  defaultHeight: '1em'
})

// test.vue
<svg-icon name="no-data" width="200" height="200" color="#C0C4CC"/>

第2种：直接使用svg图标。

进入iconfont官网-》选择图片-》设置样式后，点击复制svg代码-》在src下的svg目录中新建xxx.svg文件，并将复制的代码粘贴进去-》页面中使用svg-icon标签，修改icon-class属性值即可。

 

 <!-- 修改icon-class的属性值为新建的svg的文件名即可 -->
<svg-icon icon-class="round-star" class="sort-icon" />

iconfont官网：iconfont-阿里巴巴矢量图标库

# ios # android # 交互
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue