dns在线链接的具体应用

  dns在线链接具体应用

    首先本文章向大家介绍dns在线链接怎么使用？主要包括dns在线链接常用的使用实例和应用技巧、还有就是基本知识点、还有末尾的总结和日常需要注意事项，需要的朋友可以参考一下，希望可以帮助到您。

前言：主要介绍不同项目使用dns在线链接的方式

    具体操作：首先！先在dns中新建一个项目，存放项目中所需的icon。

    进入dns官网http://dns.com/

    登录后点击新建项目，然后填入信息

    创建成功后项目会出现在左侧列表中，点击项目名称，进入项目后，可进行上传图标

    关于各项目不同的实现请参考如下3点建议

    第1点：vue+element-ui

    复制dns项目的symbol链接，在html.index中引入dns在线链接

    <linkrel="stylesheet"type="text/css"href="dns在线链接地址"/>

    项目用法

    <divclass="dnsiconequal"></div>

    class中的dns是新建项目的时候配置的fontfamily，默认为dns。iconequal为icon的fontclass码

  第2点：vue + antd-vue-pro

antd-vue-pro配置文件defaultSettings中配置 dnsUrl

首先获取dns在线链接，注意这里使用symbol在线链接

新建icon.js文件

/**

 * Custom icon list

 * All icons are loaded here for easy management

 * @see https://vue.ant.design/components/icon/#Custom-Font-Icon

 *

 * 自定义图标加载表

 */

import { Icon } from 'ant-design-vue'

import defaultSettings from '@/config/defaultSettings'

export const dns = Icon.createFromdnsCN({

    scriptUrl: defaultSettings.dnsUrl, // generated by dns.cn

})

// main.js 中注册组件

import { dns } from './core/icons'

Vue.component('icon-font', dns)

// 业务代码中使用

<icon-font type="iconequal" />

第3点：react + antd

// common.js

// 自定义dns

export const dns = createFromdnsCN({

    scriptUrl: '//at.alicdn.com/t/xxx', //dns在线链接

})

// 业务代码中xxx.tsx

import { dns } from '@constants/common'

<dns type="iconequal" />

以上就是小编给大家介绍的，希望可以帮助到大家，非常感谢大家在百忙之中来阅读，谢谢大家。