svg模板

// 图片使用方式首推Svg

https://www.iconfont.cn/
// 阿里巴巴矢量图标库
搜索图标
移动到图标上
添加入库
右上角进入购物车样的库
添加至项目
新建项目 名称
进入项目 名称下展示已添加图标主界面
图标上栏目有三个选择
Unicode字体 FontClass字体 Symbol(推荐Svg)

在此右侧 有 在线链接 下载至本地 选项
查看在线链接
点击生成
他会生成一个.js的文件
里面存储的就是项目下面的所有图标

//插入图标 uni-app 使用方法 复制在线链接 在浏览器打开 复制内容保存到本地css 只保留 bas64 编码的src 然后使用样式添加伪元素的原理方式使用它 即可 但是这样会很麻烦 我们直接去插件市场 https://ext.dcloud.net.cn/ 搜索icons 作者： DCloud 使用HBuilderX导入插件 与components 合并 components下就多了个 uni-icons 组件 使用方式为

antd 图标组件给 这个链接提供了使用方式
// 在main.js
const IconFont = Icon.createFromIconfontCN({
scriptUrl: ‘在线链接’,
});
Vue.component(“IconFont”, IconFont);
// 将 IconFont 注册成名为 IconFont 的全局组件

// 在 任意.vue文件中

vue inspect > output.js
// 将本地的配置导出到项目根目录的output.js文件
可以直接搜索查看是否安装了 某个插件
// 可以看到 这是我们更改后的结果
// 没有更改是不会有这样一个结果的
/* config.module.rule(‘svg’) /
{
test: /.(svg)(?.)?$/,
use: [
/* config.module.rule(‘svg’).use(‘vue-svg-loader’) */
{
loader: ‘vue-svg-loader’
}
]
},
// 在阿里自己项目图标库中 鼠标悬停 可以修改图标的type 名字 更改后务必 重新生成在线链接
icon-icon-404
// 悬停时 复制代码 即为type的值 icon-icon-404

// 给图标加样式

// 其它使用方式 更多方式 cli搜索 svg