Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标

1. 在src文件下，创建components/SvgIcon/index.vue组件

<template><divv-if="isExternal":style="styleExternalIcon"class="svg-external-icon svg-icon":class="className"/><svg v-else class="svg-icon" :class="className" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script setup>
import { isExternal as external } from "@/utils/validate";
import { defineProps, computed } from "vue";const props = defineProps({// icon 图标icon: {type: String,required: true},// 图标类名className: {type: String,default: ""}
});/*** 判断是否为外部图标*/
const isExternal = computed(() => external(props.icon));
/*** 外部图标样式*/
const styleExternalIcon = computed(() => ({mask: `url(${props.icon}) no-repeat 50% 50%`,"-webkit-mask": `url(${props.icon}) no-repeat 50% 50%`
}));
/*** 项目内图标*/
const iconName = computed(() => `#icon-${props.icon}`);
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}.svg-external-icon {background-color: currentColor;mask-size: cover !important;display: inline-block;
}
</style>

2. 在src文件下，创建 utils/validate.ts

/*** 判断是否为外部资源*/
export function isExternal(path: string): boolean {return /^(https?:|mailto:|tel:)/.test(path);
}

3. 页面使用

********引用外部资源svg图标使用：

<span class="svg-container"><svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
</span>

********处理内部 svg 图标使用：

在src文件下，创建icons文件夹。
在icons文件夹下，创建svg文件夹，用于存放svg图标
在icons文件夹下，创建index.ts文件

import SvgIcon from "../components/SvgIcon/index.vue";
import { App } from "vue";// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context("./svg", false, /\.svg$/);
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon));export default (app: App): void => {app.component("svg-icon", SvgIcon);
};

在main.ts文件中引入该文件

// 导入 svgIcon
import installIcons from '@/icons'
const app = createApp(App);
installIcons(app)

// 导入 Element Plus 的 Icon 图标
import * as ELIcons from '@element-plus/icons-vue'
const app = createApp(App)
installIcons(app)
Object.keys(ELIcons).forEach((key) => {app.component(key, ELIcons[key])
})
app.use(store).use(router).mount('#app')

页面使用

// 用户名， user为具体的svg文件名
<svg-icon icon="user" />
// 密码
<svg-icon icon="password" />
// 眼睛
<svg-icon icon="eye" />

// Element Plus 的 Icon 图标 页面使用
// ************ 图标使用 **************
<el-icon :size="20"><edit />
</el-icon>
// ************ svg图标使用 **************
<template><div style="font-size: 20px"><!-- SVG 图标默认不携带任何属性 --><!-- 你需要直接提供它们 --><edit style="width: 1em; height: 1em; margin-right: 8px" /><share style="width: 1em; height: 1em; margin-right: 8px" /><delete style="width: 1em; height: 1em; margin-right: 8px" /><search style="width: 1em; height: 1em; margin-right: 8px" /></div>
</template>

使用 svg-sprite-loader 处理 svg 图标

下载loader执行

npm i --save-dev svg-sprite-loader

创建vue.config.js文件

const path = require("path");
function resolve(dir) {return path.join(__dirname, dir);
}module.exports = {chainWebpack(config) {// 设置 svg-sprite-loader// config 为 webpack 配置对象// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则.rule("svg")// 忽略.exclude.add(resolve("src/icons"))// 结束.end();// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则.rule("icons")// 正则，解析 .svg 格式文件.test(/\.svg$/)// 解析的文件.include.add(resolve("src/icons"))// 结束.end()// 新增了一个解析的loader.use("svg-sprite-loader")// 具体的loader.loader("svg-sprite-loader")// loader 的配置.options({symbolId: "icon-[name]"})// 结束.end();}
}

最终效果成功展示：

Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标相关推荐

Vue3.0 + Ts 项目框架搭建二：路由 Router
前言上篇文章我们使用 vue-cli 创建了模板项目,可以看到安装的依赖只有 vue,所以要正常的驱动项目,安装必要的依赖是跑不了. 其中Router是控制整个系统的页面路由,是最重要的依赖之一.因 ...
Vue3.0 + Ts 项目使用element-plus 自动按需导入使用v-loading报错
问题展示: 使用v-loading报错无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法: element-plus ...
vue3.0+ts+element-plus多页签应用模板：项目搭建
目录系列文章一.安装vue-cli@4.5.x 二.创建项目三.项目配置四.IDE配置五.vue.config.js配置六.重置浏览器默认样式系列文章 vue3.0+ts+element ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
vue3.0实战项目
vue3.0+typescript+vite2实战:后台管理系统一.技术栈二.功能架构三.框架搭建四.安装插件 1.路由插件vue-router4安装使用 2.vuex4的安装 3.安装sas ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
(三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...

Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标

1. 在src文件下，创建components/SvgIcon/index.vue组件

2. 在src文件下，创建 utils/validate.ts

3. 页面使用

********引用外部资源svg图标使用：

********处理内部 svg 图标使用：

Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标相关推荐

最新文章

热门文章