Icon 图标

小于 1 分钟

Icon 图标

使用设计师提供的 iconfont，详见阿里 iconfontopen in new window(项目名称：B+ Design 组件库图标)。

示例

基本用法

注意

上述第三个图标文件夹无法修改颜色？是因为上传的 svg 已经被填充了颜色所以无法修改！详见iconfont 图标不能修改颜色的解决方案open in new window

属性传入scriptUrl地址

方法设置scriptUrl地址

默认 B+包含 icon

具体查看iconfont 官网open in new window,需要提供本人 iconfont 注册昵称然后找设计添加到相应组织

<template>
  <div v-if="icons.length <= 0" class="demo-loading">
    <f-spin />
    <FIcon ref="iconRef" />
  </div>
  <div v-else class="demo-icons">
    <div class="demo-icons-item" v-for="t in icons" @click="handleClick(t)">
      <f-icon :key="t" :type="t"></f-icon>
      <span class="demo-icons-item-txt">{{ t }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message, FIcon } from '@fs/smart-design'

const icons = ref<string[]>([])

const parseIcons = () => {
  const target = window['_iconfont_svg_string_4011024']
  const regex = /id="(.*?)"/g
  const result: string[] = []
  let match
  while ((match = regex.exec(target)) !== null) {
    result.push(match[1])
  }
  icons.value = [...result]
  console.log(result.length)
}

const copyToClipboard = (text: string) => {
  const input = document.createElement('textarea')
  input.value = text
  document.body.appendChild(input)
  input.select()
  document.execCommand('copy')
  document.body.removeChild(input)
}

const handleClick = (type: string) => {
  copyToClipboard(type)
  message.success('已复制')
}

const loadJS = (url: string) =>
  new Promise(resolve => {
    const $h = document.getElementsByTagName('head')[0]
    const $script = document.createElement('script')
    $script.setAttribute('type', 'text/javascript')
    $script.setAttribute('src', url)
    $h.appendChild($script)
    $script.onload = () => {
      resolve(true)
    }
  })

const iconRef = ref()
onMounted(() => {
  console.log('>>>>>',iconRef.value.getScriptUrl())
  loadJS(iconRef.value.getScriptUrl()).finally(() => {
    parseIcons()
  })
})
</script>

<style lang="scss" scoped>
.demo-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.demo-icons {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  &-item {
    width: 110px;
    margin: 18px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .anticon{
      font-size: 36px;
    }
    &-txt {
      font-size: 12px;
      white-space: nowrap;
    }
  }
}
</style>

API

参数	说明	类型	默认值
type	复制所选 iconfont 类名	string
scriptUrl	CDN 地址	string	`https://resource-accel.fs.com/backstage/public-resources/cdn/fs/smart-desgin-iconfont/iconfont.js`

静态方法

import { FIcon } from '@fs/smart-design'

// 自定义默认地址
FIcon.setScriptUrl('https://resource-accel.fs.com/backstage/public-resources/cdn/fs/smart-desgin-iconfont/iconfont.js')

Icon 图标

# Icon 图标

# 示例

# 默认 B+包含 icon

# API

# 静态方法

Icon 图标

示例

默认 B+包含 icon

API

静态方法