创建一个Icon组件，供自定义的svg图标使用和iconfont图标使用
<template> <svg class="icon"> <use :href="id"></use> </svg> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'Icon', props: { name: String, }, setup(props) { const id = ref(`#${props.name}`) return { id, } }, }) </script> <style> .icon { width: 100%; height: 100%; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
如何inconfont图标
- 访问iconfont官网，保存图标到自己创建的项目中，然后点击symbol的形式引入。
- 将js文件引入public/index.html中。
- 使用。直接通过class来控制图标样式和大小。class会直接绑定到Icon组件的根组件上。
<Icon name="icon-weixin" class="icon-weixin"></Icon> // 通过class来控制图标的样式 .icon-weixin { width: 20px; height: 20px; color: red; }
定义和使用自定义图标
- 在public/index.html中设计svg图标。
<svg width="0" height="0"> <defs> <symbol viewBox="0 0 100 100" id="iconRect"> <rect x="0" y="0" width="100" height="100"></rect> </symbol> </defs> </svg>
- 使用。
<Icon name="iconRect" class="icon-rect"></Icon> // 通过class来控制图标的样式 .icon-rect { width: 20px; height: 20px; color: red; }
网络异常，图片无法展示
|
