当前位置：网站首页>Milkdown control icon

Milkdown control icon

2022-07-07 13:27:00 【Cliven_】

Phenomenon description

stay vite + vue3 In the project , Use Milkdown As Markdown Edit box

Milkdown.vue

<template>
    <VueEditor :editor="editor" />
</template>

<script setup> import {
       Editor, rootCtx, defaultValueCtx } from "@milkdown/core"; import {
       nord } from "@milkdown/theme-nord"; import {
       VueEditor, useEditor } from "@milkdown/vue"; import {
       commonmark } from "@milkdown/preset-commonmark"; import {
       emoji } from "@milkdown/plugin-emoji"; import {
       history } from '@milkdown/plugin-history'; import {
       tooltip } from '@milkdown/plugin-tooltip'; import {
       menu } from "@milkdown/plugin-menu"; const {
       editor } = useEditor((root) => Editor.make() .config((ctx) => {
       ctx.set(rootCtx, root); ctx.set(defaultValueCtx, "# Milkdown  Vue"); }) .use(nord) .use(emoji) .use(commonmark) .use(history) .use(menu) .use(tooltip) ); </script>

The display effect is as shown in the figure

Insert picture description here
All icon areas become text , And crowded together very ugly , This is because milkdown/theme-nord The theme uses google Provided Google material icons

from Milkdown Official example You can see

Insert picture description here
stay index.html The document introduces Google Icon font library .

solve

Mode one Introduce... Online

The reason why there is no icon in our space is that there is no Google Icon font library causes , We can be as official , Directly in index.html Add a line to the file CSS The reference of the file can .

index.html

<html>
  <head>
	...
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />
    ...
  </head>
 ...
</html>

This method will use Google Of CSS2 API Automatically reference and related fonts and configurations , There is a problem with this method when network conditions do not allow , It will cause the icon to still fail to load .

Mode two Offline import

according to Google material icons#setup_method_2_self_hosting Description in , We can download relevant font files , Then manually configure css Use font files .
Insert picture description here

For simplicity, I directly visited Google Of

https://fonts.googleapis.com/icon?family=Material+Icons+Outlined API

Got it CSS Configuration file and font file .

CSS As shown below

/* fallback */
@font-face {
    
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v106/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
    
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

A font file also appears here

gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2

Here I also manually download and place the file in the project public/ Under the table of contents .

Insert picture description here
And then modified Milkdown.vue, Added the above CSS, And replaced the address of the font file with the local address , The modified file is as follows .

<template>
    <VueEditor :editor="editor" />
</template>

<script setup> import {
       Editor, rootCtx, defaultValueCtx } from "@milkdown/core"; import {
       nord } from "@milkdown/theme-nord"; import {
       VueEditor, useEditor } from "@milkdown/vue"; import {
       commonmark } from "@milkdown/preset-commonmark"; import {
       emoji } from "@milkdown/plugin-emoji"; import {
       history } from '@milkdown/plugin-history'; import {
       tooltip } from '@milkdown/plugin-tooltip'; import {
       menu } from "@milkdown/plugin-menu"; const {
       editor } = useEditor((root) => Editor.make() .config((ctx) => {
       ctx.set(rootCtx, root); ctx.set(defaultValueCtx, "# Milkdown  Vue"); }) .use(nord) .use(emoji) .use(commonmark) .use(history) .use(menu) .use(tooltip) ); </script>
<style> @font-face {
       font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; src: url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2'); } .material-icons-outlined {
       font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } </style>