这是我参与「第五届青训营 」伴学笔记创作活动的第16天

使用阿里的iconfront组件库作为图标来源 symbol类型

一篇文章建议使用原本的symbol内容， 明天继续补充

导入iconfont组件库

导入js部分没有看懂，之前的项目是在线引用的，将js串放到index文件中用link标签引用

<script src="//at.alicdn.com/t/c/font_3816968_rupkxlsa3vp.js"></script>

查看vite的绝对路径设置

vite.config.ts文件中的resolve,与webpack设置相同 此时@符号为./src目录

resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },

setup返回需要加大括号

否则会显示没有返回值

“Property "iconUse" was accessed during render but is not defined on instance”

末班字符串报错问题

两个反引号报错

<use xlink:href= `#icon-${iconName}`></use>

后来采用计算属性， setup中使用props需要解构赋值 或者直接props.iconName使用 const {iconName} = props 数值传入成功，但是不能正常显示

——暂时未解决，使用了本地资源导入，成功显示了

在button组件中不正常显示

由于button中无法使用另一组件icon，使用组件注册方式完成 template中使用Icon组件即可

components: {
    Icon,
  },

不明白全局注册为什么不生效

git部分

git中提交格式不对 最终发现是冒号后面需要加空格

git commit -m "feat: add icon components"

远程提交到仓库后总是

• remote: Permission to BF-Teams/bfui-vue.git denied to sleep-earily.

找了半天改url等问题，都不行

我猜想是需要管理员查看后才能合并主仓库

以后可能需要改的问题

1. 远程引用图标库
2. button使用其他组件时全局引用有效吗，怀疑原本的全局注册是失效的
3. setup中props.type会报错，应该是可以验证的

设置旋转

需要判断iconName是否为加载

计划使用less进行判断，但是无法通过js设置less变量，或者通过less获取props值

.icon when(@iconname='jiazai'){
    animation: rotating 4s linear infinite;
}

因此通过修改class方式实现旋转

.icon2{
animation: rotating 4s linear infinite;
}

@keyframes rotating {
0% {
  transform: rotateZ(0deg);
}
100% {
  transform: rotateZ(360deg);
}
} 

js中判断iconName值修改class

  <svg class="icon" aria-hidden="true" :class="iconName==='jiazai' ? 'icon2' : ''">
    <use :xlink:href="iconUse"></use>
  </svg>

明日计划： 下拉组件/展示列表组件

参考文章

# 如何开发一个人人爱的组件？