阿里标iconfont的引入-飞

2023/7/6 17:12:18 ('互联网')

2022年下半年的面：

// 这里的 xlink: href ="#阿里图标复制的类名" 。点击项目的 Symbol 标签，复制代码。<svg  aria-hidden="true">    <use xlink:href="#icon-xxx"></use></svg>

遇到不能修改颜色的彩色图标时，参考：svg图标无法修改颜色的解决方案

项目应用

组件使用：

 <svg-icon  icon- />

组件注册：

import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon', SvgIcon)

组件编写：

<template>  // 无法找到相应图标时设置默认显示  <div v-if="isExternal" :style="styleExternalIcon"  v-on="$$listeners" >  </div>  <svg v-else : aria-hidden="true" v-on="$$listeners">     <use :xlink:href="iconName" />  </svg></template><script>import { isExternal } from '@/utils/validate'export default {  name: 'SvgIcon',  props: {    iconClass: {      type: String,      required: true    },    className: {      type: String,      default: ''    }  },  computed: {    isExternal() {      return isExternal(this.iconClass)    },    iconName() {      return `#icon-$${this.iconClass}`    },    svgClass() {      if (this.className) {        return 'svg-icon ' + this.className      } else {        return 'svg-icon'      }    },    // 添加动态标注，及样式    styleExternalIcon() {      return {        mask: `url($${this.iconClass}) no-repeat 50% 50%`,        '-webkit-mask': `url($${this.iconClass}) no-repeat 50% 50%`      }    }  }}</script><style scoped>.svg-icon {  width: 2em;  height: 1em;  /* vertical-align: -0.15em; */  fill: currentColor;  overflow: hidden;  color: #B0B6C6;  /* height: 20px; */}.svg-external-icon {  background-color: currentColor;  mask-size: cover!important;  display: inline-block;}</style>

/utils/validate 文件

export function isExternal(path) {  return /^(https?:|mailto:|tel:)/.test(path)}

font-class 引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
面：

<i ></i>

扫码加微信详细咨询太和智慧养老产品和平台服务！

---------------------------------------------------------------

所有信息来源于互联网,本文的版权归原作者所有，不代表本网观点和立场。

本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 81480447@qq.com 举报，一经查实，本站将立刻删除。

扫码加微信详细咨询太和智慧养老产品和平台服务！

养老资讯

助老机构介绍

已有 0 条评论

看不清楚?请点击刷新验证码

阿里标iconfont的引入-飞

评论

推荐养老院

全国城市养老院