justin2018

justin2018

V2EX 第 351542 号会员,加入于 2018-09-22 21:00:39 +08:00
今日活跃度排名 4099
根据 justin2018 的设置,主题列表被隐藏
二手交易 相关的信息,包括已关闭的交易,不会被隐藏
justin2018 最近回复了
10 小时 17 分钟前
回复了 tyrone2333 创建的主题 职场话题 有人开车上班带同事吗? 收多少一月比较好
建议拒绝 时间长了 同事会把这个当成理所当然

要是收钱 同事 跟觉得理所当然了
这是啥模拟器和手柄 😁

有个闲置的手机 想玩玩 Switch😁
3 天前
回复了 SniperXu 创建的主题 Vue.js vue3+vite 动态引入 SVG ICON 的问题
### Vue 中优雅使用 SVG

#### 相关文章

在 vue 项目中优雅的使用 Svg - 掘金
https://juejin.cn/post/6844903697999200263

在 vue3+vite 项目中使用 svg - 掘金
https://juejin.cn/post/6932037172178616334

通过 vite-plugin-svg-icons 插件封装 SvgIcon 组件 - 掘金
https://juejin.cn/post/7094060278475653128

---

#### 使用`vite-plugin-svg-icons`插件

##### 安装插件

```shell
// 安装插件
npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D

// 如果报错 需要安装“fast-glob”
yarn add fast-glob -D
```

##### 封装 SvgIcon 组件

```javascript
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
<use :xlink:href="iconName" />
</svg>
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
name: "SvgIcon",
props: {
name: {
type: String,
required: true,
},
color: {
type: String,
default: "#333",
},
},
setup(props) {
const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
console.log(props.name, "props.name");
if (props.name) {
return `svg-icon icon-${props.name}`;
}
return "svg-icon";
});

return {
iconName,
svgClass,
};
},
});
</script>

<style scoped>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
</style>

```



##### 配置插件

```javascript
// 配置 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
})
],
})

// 配置 main.js
import 'virtual:svg-icons-register'

const app = createApp(App);

app
.component("svg-icon", SvgIcon)
.mount('#app');
```

##### 使用插件

```vue
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import SvgIcon from "./components/SvgIcon.vue";
</script>

<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<SvgIcon name="tree" />
</template>

<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

```
看 Swift 语法 1 天

实战 SwiftUI 1 天 😁

---

Learn SwiftUI - Kavsoft

https://kavsoft.dev/
11 天前
回复了 frank1256 创建的主题 程序员 熟人开发商城小程序,怎么要价?
别做

让你的朋友当中间人 接单 你来做

不然 到时候 各种麻烦
记得 一个熟人找做企业门户网站

熟人朋友的报价 3w 感觉高了 朋友要挣他钱
外包公司都报价 20w 觉得别人做得网站很高大上 很大气 很专业

熟人选择了外包公司
App 一定要有颜值
19 天前
回复了 zhoupeng199 创建的主题 问与答 室友总喝我可乐
买瓶装的就好了 😁
19 天前
回复了 inertiagrade 创建的主题 Apple [送码] [推出小组件] Mac 远程锁 SimpleLock
楼主

可以用自己的 VPS 部署后端

在 SimpleLock 自定义自己的服务器地址吗?
20 天前
回复了 smd 创建的主题 生活 最近每天都能收到招嫖短信……
每个星期都有 而且 文案还不一样

安卓和 iOS 咋屏蔽
关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2725 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 16ms · UTC 14:40 · PVG 22:40 · LAX 07:40 · JFK 10:40
Developed with CodeLauncher
♥ Do have faith in what you're doing.