关于css:项目引入阿里图标库

6次阅读

共计 872 个字符，预计需要花费 3 分钟才能阅读完成。

反对多色图标了，不再受单色限度
通过一些技巧，反对像字体那样，通过 font-size,color 来调整款式
兼容性较差，反对 ie9+, 及古代浏览器
浏览器渲染 svg 的性能个别，不如 png
前端引入 js 链接
<script src=”http://at.alicdn.com/t/font_2326420_a5e2tkgk7u9.js”></script>
2. 因为我的项目中常常会用到 icon, 所以封装成了组件, 而后全局注册组件, 不便团队应用.

<template>
  <svg class="svg-icon"
    aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'IconSvg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {iconName () {return `#${this.iconClass}`
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

二. font-class 形式（单色）

兼容性良好，反对 ie8+，及所有古代浏览器
因为应用 class 来定义图标，所以当要替换图标时，只须要批改 class 外面的 unicode 援用
相比于 unicode 语意明确，书写更直观。能够很容易分辨这个 icon 是什么
不过因为实质上还是应用的字体，所以多色图标还是不反对的

在线引入

1. 在 html 中应用 link
<link rel=”stylesheet” href=”http://at.alicdn.com/t/font_1957918_fj77cbthvj.css”>
2. 而后筛选相应的类名退出页面

本地引入

正文完